没问题，我来帮你搞定这个需求！结合你现有的PDO判断逻辑和Bootstrap模态框，我们可以分两种常见场景来实现，下面是具体的代码方案：

场景1：同步表单提交（页面刷新后显示模态框） #

这种方式适合传统的表单提交流程，后端验证后通过PHP变量控制模态框是否显示。

1. 后端PDO验证逻辑（PHP） #

// 假设你已经有PDO数据库连接对象$pdo
$showModal = false;
$modalHead = '';
$modalMsg = '';

// 处理表单提交
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $username = trim($_POST['username'] ?? '');
    
    if (!empty($username)) {
        // 准备查询语句，防止SQL注入
        $stmt = $pdo->prepare("SELECT id FROM users WHERE username = :username");
        $stmt->bindParam(':username', $username, PDO::PARAM_STR);
        $stmt->execute();
        
        // 判断用户名是否存在
        if ($stmt->rowCount() > 0) {
            $showModal = true;
            $modalHead = '用户名已存在';
            $modalMsg = '抱歉，你输入的用户名已经被注册，请更换其他用户名重试。';
        }
    }
}

2. 完善Bootstrap模态框HTML #

把你的模态框结构补全，并插入后端传递的文本内容（注意用htmlspecialchars防止XSS攻击）：

<!-- Bootstrap 5 模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="myModalLabel"><?php echo htmlspecialchars($modalHead); ?></h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <?php echo htmlspecialchars($modalMsg); ?>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

3. 页面加载时触发模态框 #

添加一段JavaScript，在页面加载完成后根据后端的$showModal变量判断是否显示模态框：

<script>
document.addEventListener('DOMContentLoaded', function() {
    <?php if ($showModal): ?>
        // 初始化并显示模态框（Bootstrap 5语法）
        const myModal = new bootstrap.Modal(document.getElementById('myModal'));
        myModal.show();
    <?php endif; ?>
});
</script>

如果你用的是Bootstrap 4，需要把data-bs-dismiss改成data-dismiss，模态框初始化代码改成$('#myModal').modal('show')（需要引入jQuery）。

场景2：AJAX异步提交（无刷新显示模态框） #

这种方式用户体验更好，页面不需要刷新就能实时验证并显示提示：

1. 前端表单与AJAX脚本 #

<form id="registerForm">
  <div class="mb-3">
    <label for="username" class="form-label">用户名</label>
    <input type="text" class="form-control" id="username" name="username" required>
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

<!-- 模态框结构和上面一致，这里省略重复代码 -->
<div class="modal fade" id="myModal" ...></div>

<script>
// 监听表单提交事件
document.getElementById('registerForm').addEventListener('submit', function(e) {
    e.preventDefault(); // 阻止默认表单提交
    
    const username = document.getElementById('username').value.trim();
    const formData = new FormData();
    formData.append('username', username);
    
    // 发送AJAX请求到后端验证
    fetch('check_username.php', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.exists) {
            // 更新模态框内容
            document.getElementById('myModalLabel').textContent = data.modalHead;
            document.querySelector('#myModal .modal-body').textContent = data.modalMsg;
            // 显示模态框
            const myModal = new bootstrap.Modal(document.getElementById('myModal'));
            myModal.show();
        } else {
            // 用户名可用，执行实际的注册提交逻辑
            // 比如可以继续提交表单：this.submit();
            alert('用户名可用，即将提交注册！');
        }
    })
    .catch(error => console.error('验证出错:', error));
});
</script>

2. 后端验证接口（check_username.php） #

<?php
// 初始化PDO连接（替换成你的数据库信息）
$pdo = new PDO('mysql:host=localhost;dbname=your_database;charset=utf8mb4', 'your_user', 'your_password');

$username = trim($_POST['username'] ?? '');
$response = [
    'exists' => false,
    'modalHead' => '',
    'modalMsg' => ''
];

if (!empty($username)) {
    $stmt = $pdo->prepare("SELECT id FROM users WHERE username = :username");
    $stmt->bindParam(':username', $username, PDO::PARAM_STR);
    $stmt->execute();
    
    if ($stmt->rowCount() > 0) {
        $response['exists'] = true;
        $response['modalHead'] = '用户名已存在';
        $response['modalMsg'] = '抱歉，你输入的用户名已经被注册，请更换其他用户名重试。';
    }
}

// 返回JSON格式响应
header('Content-Type: application/json');
echo json_encode($response);
?>

关键注意事项 #

• 始终用htmlspecialchars转义输出到HTML的变量，避免XSS安全漏洞。
• 确保你已经正确引入了Bootstrap的CSS和JS文件（包括Popper.js，Bootstrap 5依赖它）。
• PDO查询一定要用预处理语句，防止SQL注入攻击。

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