不使用Bootstrap实现onclick向弹窗模态框传递数据

首先明确一点：PHP是后端语言，没法直接作为onclick的执行逻辑，但它可以帮你动态生成带ID参数的onclick事件，剩下的模态框控制、数据传递和表单填充，用原生JavaScript就能搞定，完全不需要Bootstrap。刚好你想保留onclick的触发方式，这个方案完美适配。

下面是具体的实现步骤，结合你的需求：

1. 用PHP动态生成带ID的编辑按钮 #

假设你从数据库拉取了数据列表，每个编辑按钮需要绑定对应数据的ID，PHP可以帮你把ID动态插入到onclick的函数参数里：

<?php
// 示例：模拟从数据库获取的数据集
$items = [
    ['id' => 1, 'name' => '产品A'],
    ['id' => 2, 'name' => '产品B']
];
foreach($items as $item):
?>
<button onclick="openEditModal(<?php echo $item['id']; ?>)">编辑「<?php echo $item['name']; ?>」</button>
<?php endforeach; ?>

页面加载时，PHP会把每个按钮的onclick事件生成为openEditModal(1)、openEditModal(2)这样，点击时就会把对应ID传给JS函数。

2. 写好自定义模态框的HTML结构 #

先搭一个隐藏状态的模态框，包含用来展示数据的表单：

<!-- 自定义模态框（默认隐藏） -->
<div id="editModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 1000;">
    <div style="background: #fff; margin: 10% auto; padding: 2rem; width: 90%; max-width: 400px; border-radius: 8px;">
        <h3>编辑数据</h3>
        <form id="editForm">
            <!-- 隐藏字段存ID，提交时用 -->
            <input type="hidden" id="targetItemId">
            <div style="margin: 1rem 0;">
                <label for="itemName">名称：</label>
                <input type="text" id="itemName" style="width: 100%; padding: 0.5rem; margin-top: 0.5rem;">
            </div>
            <!-- 其他字段可以继续添加 -->
            <div style="display: flex; gap: 1rem; justify-content: flex-end; margin-top: 1.5rem;">
                <button type="button" onclick="closeEditModal()">取消</button>
                <button type="submit">保存修改</button>
            </div>
        </form>
    </div>
</div>

这里的样式是纯自定义的，完全不依赖Bootstrap，你可以根据自己的需求调整。

3. 核心JS逻辑：接收ID、拉取数据、填充表单 #

这部分是实现功能的关键，负责打开模态框、用ID从后端拉取数据，然后把数据填充到表单里：

// 打开模态框，接收传递过来的ID
function openEditModal(itemId) {
    // 先把ID存入模态框的隐藏字段
    document.getElementById('targetItemId').value = itemId;

    // 发送请求到后端，根据ID获取数据
    fetch(`get-item-data.php?id=${itemId}`)
        .then(response => {
            if (!response.ok) throw new Error('数据获取失败');
            return response.json();
        })
        .then(data => {
            // 把后端返回的数据填充到表单对应的字段
            document.getElementById('itemName').value = data.name;
            // 如果有其他字段，比如描述、价格，继续在这里填充
        })
        .catch(error => {
            alert(error.message);
            closeEditModal(); // 出错就关闭模态框
        });

    // 显示模态框
    document.getElementById('editModal').style.display = 'block';
}

// 关闭模态框的函数
function closeEditModal() {
    document.getElementById('editModal').style.display = 'none';
    // 可选：清空表单内容，避免下次打开时残留旧数据
    document.getElementById('editForm').reset();
}

// 可选：点击模态框的背景区域也能关闭
window.addEventListener('click', (event) => {
    const modal = document.getElementById('editModal');
    if (event.target === modal) {
        closeEditModal();
    }
});

4. 后端PHP接口：根据ID返回数据 #

写一个简单的PHP接口（比如get-item-data.php），用来接收ID，从数据库查询对应数据并返回JSON格式：

<?php
// 数据库连接配置（替换成你自己的信息）
$host = 'localhost';
$dbUser = 'your_username';
$dbPass = 'your_password';
$dbName = 'your_database';

// 建立数据库连接
$conn = new mysqli($host, $dbUser, $dbPass, $dbName);
if ($conn->connect_error) {
    die(json_encode(['error' => '数据库连接失败']));
}

// 接收前端传递的ID，注意转义防止SQL注入
$itemId = $conn->real_escape_string($_GET['id'] ?? '');
if (empty($itemId)) {
    echo json_encode(['error' => '缺少ID参数']);
    $conn->close();
    exit;
}

// 查询对应ID的数据
$query = "SELECT id, name FROM your_table WHERE id = '$itemId'";
$result = $conn->query($query);

if ($result->num_rows === 0) {
    echo json_encode(['error' => '未找到对应数据']);
} else {
    $data = $result->fetch_assoc();
    echo json_encode($data);
}

$conn->close();
?>

几个关键注意点 #

• PHP的角色：PHP只在页面加载时帮你生成带参数的onclick事件，用户点击按钮时，是JS在执行逻辑，和PHP无关了。
• 无Bootstrap依赖：所有模态框的样式、显示/隐藏逻辑都是原生实现的，完全不需要Bootstrap的任何组件。
• 安全性：注意对后端接收的ID进行转义，防止SQL注入；前端拉取数据时也要做错误处理，提升用户体验。

内容的提问来源于stack exchange，提问作者Ivan Sim