bootstrap的模态框失效 并且没有data-dismiss这个属性
这是jsp的引入
<script src="https://cdn.staticfile.org/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/2.11.6/cjs/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.2.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.staticfile.org/bootstrap-icons/1.10.2/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.6.1/css/bootstrap.min.css">
这是添加按钮
<div class="form-group col-md-2 col" >
<button type="button" class="btn btn-success" data-toggle="modal" onclick="read()" data-bs-target="#addUserModal">
<span style="" class="" aria-hidden="true">
<i class="bi bi-person-fill-add">添加用户信息</i>
</span>
</button>
</div>
这是模态框
<form method="post" action="UserServlet?type=add" class="form-horizontal" role="form"
id="form_data">
<div class="modal fade" id="addUserModal" tabindex="-1"
role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" type="button">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true"></button>
<h4 class="modal-title" id="myModalLabel">添加信息</h4>
</div>
<div>
<form>
<div class="form-horizontal" role="form">
<div class="form-group">
<label for="user_id" class="col-sm-3 custom-control-label">用户名</label>
<div class="col-sm-9">
<input type="text" required class="form-control" id="username"
name="username" placeholder="请输入用户名">
</div>
</div>
<div class="form-group">
<label for="user_id" class="col-sm-3 custom-control-label">密码</label>
<div class="col-sm-9">
<input type="text" required class="form-control" id="password"
name="password" value="" placeholder="请输入密码">
</div>
</div>
<div class="form-group">
<label for="user_id" class="col-sm-3 custom-control-label">姓名</label>
<div class="col-sm-9">
<input type="text" required class="form-control" id="name"
name="name" value="" placeholder="请输入密码">
</div>
</div>
<div class="form-group">
<label for="user_id" class="col-sm-3 custom-control-label">ID</label>
<div class="col-sm-9">
<input type="text" required class="form-control" id="id"
name="id" value="" placeholder="请输入密码">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</form>
浏览器控制台会报一个popper的错误
Object.defineProperty(exports, "__esModule", {
value: !0
});
说是exports没有被定义
求解决!
新问题 现在模态框能弹出来黑色影子 但是popper报错又多一项
function getWindow(e) {
return null == e ? window : "[object Window]" !== e.toString() ? (t = e.ownerDocument) && t.defaultView || window : e;
var t
}
function isElement(e) {
return e instanceof getWindow(e).Element || e instanceof Element
}
function isHTMLElement(e) {
return e instanceof getWindow(e).HTMLElement || e instanceof HTMLElement
}
function isShadowRoot(e) {
return "undefined" != typeof ShadowRoot && (e instanceof getWindow(e).ShadowRoot || e instanceof ShadowRoot)
}
Object.defineProperty(exports, "__esModule", {
value: !0
});
原因如下
Uncaught RangeError: Maximum call stack size exceeded
at HTMLDivElement.toString (<anonymous>)
at getWindow (popper.min.js:formatted:3)
at getComputedStyle (popper.min.js:formatted:81)
at getComputedStyle (popper.min.js:formatted:81)
at getComputedStyle (popper.min.js:formatted:81)
at getComputedStyle (popper.min.js:formatted:81)
at getComputedStyle (popper.min.js:formatted:81)
at getComputedStyle (popper.min.js:formatted:81)
at getComputedStyle (popper.min.js:formatted:81)
at getComputedStyle (popper.min.js:formatted:81)
如果可以的话,可以换一个前端控件,比如layui等。