引导程序 4 由 ajax 调用打开的模态 - 关闭按钮不起作用 - Bootstrap 4 Modal opened by ajax call

我的引导模式有问题。我正在使用$.ajax调用，因此我可以将 POST 数据发送到单独的.php文件，以显示在打开的模态中。我一直在使用 Bootstrap 3，我没有错误，但是当我升级到 Bootstrap 4 时，我的模态不会关闭。

最初，我在StackOverflow上发现了使用show.bs.modal的技术，因为我做了研究来构建我的网站。出于测试目的，我尽可能简单地剥离了我的代码，因此我可以在这个问题中复制它。在下面的代码中，标题为"启动演示模态"的按钮将打开和关闭，但"启动 ajax 演示模态"只会打开(我必须刷新才能让它消失)。

我非常努力地遵循 Bootstrap 关于如何安排其库的链接和引用的建议。请注意，show.bs.modal"on"函数中涉及一个名为test-modal.php的文件。

请参阅我正在尝试的精简测试代码，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<link rel="icon" href="http://si.hclibrary.org/wp-content/uploads/2017/02/Icon_SmallSi-01.png" sizes="32x32">
<title>HCLS IT Helpdesk Request Site</title>
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal2">
Launch ajax demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"></div>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<script>
$( document ).ready(function() {
$('#exampleModal2').on('show.bs.modal', function(e) { 
$.ajax({
type:'post',
url:'test-modal.php',
data:{
id:"id",
type:"type"
},
success:function(data) {
$('#exampleModal2').html(data);
}
});
});
});
</script>
</body>
</html>

我的测试模式.php文件非常简单：

<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Ajax Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>

有没有人遇到过模态不会像正常情况下那样关闭的问题？ Bootstrap 4 中是否有某些内容被弃用，因此它不应该像以前那样工作？或者有没有另一种方法应该将 POST 变量发送到打开的模态？我已经坚持了很长时间，非常感谢所有的建议。请让我知道我是否应该包含更多信息。

不要替换整个模态标记...

由于事件处理程序在加载时由 Bootstrap 绑定，因此如果"替换"它们，则不会绑定新元素，因为 Bootstrap 已经运行。

只需在 Ajaxsuccess回调中使用$('#exampleModal2 .modal-body').html(data);加载模态的主体。

如果您想更改标题，可以使用：

$('#exampleModal2 .modal-title').html("Ajax loaded this new title.");

如果需要从服务器资源发送标题和正文内容，请查找 JSON 数据响应。

JSON 数据格式将允许您一次发送多个"数据"。
;)

引导程序 4 由 ajax 调用打开的模态 - 关闭按钮不起作用

相关内容

最新更新

热门标签：