JSP页面中Bootstrap模态表单无法显示的问题求助

嘿，我一眼就瞅出问题所在了——你用的是Bootstrap 5版本，但模态框相关的触发属性还停留在Bootstrap 4及更早的写法上，这就导致按钮点击后没法触发模态框正常显示。

Bootstrap 5为了避免和其他JavaScript框架的属性冲突，把所有模态框相关的data-*属性都统一加上了bs前缀，具体修改点如下：

1. 更新触发按钮的属性 #

把主JSP里的按钮属性从旧版换成Bootstrap 5的格式：

<button type="button" id="modalFormButton" class="btn btn-primary btn-block" data-bs-toggle="modal" data-bs-target="#agregarClienteModal">
  Agregar Cliente
</button>

简单说就是把data-toggle改成data-bs-toggle，data-target改成data-bs-target。

2. 更新模态框关闭按钮的属性 #

模态框里的关闭按钮也要同步更新属性：

<button class="close" data-bs-dismiss="modal">
  <span>&times;</span>
</button>

把data-dismiss替换成data-bs-dismiss就行。

修改后的完整代码示例 #

主JSP文件： #

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- Bootstrap CSS --> 
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous"> 
    <title>JSP Page</title> 
</head> 
<body> 
    <header class="py-2 bg-info text-white"> 
        <div> 
            <h1> Clients </h1> 
            <button type="button" id="modalFormButton" class="btn btn-primary btn-block" data-bs-toggle="modal" data-bs-target="#agregarClienteModal"> 
                Agregar Cliente 
            </button> 
        </div> 
        <jsp:include page="addClientModalForm.jsp"/> 
    </header> 
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script> 
</body> 
</html>

模态表单文件： #

<div class="modal fade" id="agregarClienteModal"> 
    <div class="modal-dialog modal-lg"> 
        <div class="modal-content"> 
            <div class="modal-header bg-info text-white"> 
                <h5 class="modal-title">Agregar Cliente</h5> 
                <button class="close" data-bs-dismiss="modal"> 
                    <span>&times;</span> 
                </button> 
            </div> 
            <form action="${pageContext.request.contextPath}/servlet?accion=insertar" method="POST" class="was-validated"> 
                <div class="modal-body"> 
                    <div class="form-group"> 
                        <label for="nombre">Nombre</label> 
                        <input type="text" class="form-control" name="nombre" required> 
                    </div> 
                    <div class="form-group"> 
                        <label for="apellido">Apellido</label> 
                        <input type="text" class="form-control" name="apellido" required> 
                    </div> 
                    <div class="form-group"> 
                        <label for="email">Email</label> 
                        <input type="email" class="form-control" name="email" required> 
                    </div> 
                    <div class="form-group"> 
                        <label for="telefono">Teléfono</label> 
                        <input type="tel" class="form-control" name="telefono" required> 
                    </div> 
                    <div class="form-group"> 
                        <label for="saldo">Saldo</label> 
                        <input type="number" class="form-control" name="saldo" required step="any"> 
                    </div> 
                </div> 
                <div class="modal-footer"> 
                    <button class="btn btn-primary" type="submit">Guardar</button> 
                </div> 
            </form> 
        </div> 
    </div> 
</div>

这样修改之后，点击按钮应该就能正常弹出模态框了。本质就是Bootstrap 5对组件的data属性做了前缀升级，旧属性不再被框架识别，所以才会出现代码加载成功但功能不生效的情况。

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