通过ajax调用打开Bootstrap 4 Modal-关闭按钮不起作用 [英] Bootstrap 4 Modal opened by ajax call - close buttons don't work
问题描述
我的Bootstrap模式有问题.我正在使用 $.ajax 调用，因此我可以将POST数据发送到单独的.php文件，以显示在打开的模式中.我一直在使用Bootstrap 3，但没有任何错误，但是当我升级到Bootstrap 4时，我的模式不会关闭.
I have a problem with my Bootstrap modals. I am using an $.ajax call, so I can send POST data to a separate .php file, to be displayed in the opened modal. I've been using Bootstrap 3, and I had no bugs, but when I upgraded to Bootstrap 4, my modals will not close.
最初，我在研究建立网站的过程中发现了在StackOverflow上使用 show.bs.modal 的技术.为了测试目的，我尽可能地简化了代码，因此可以在此问题中将其复制.在下面的代码中，将打开和关闭标题为"Launch demo modal"的按钮，但是仅将打开"Launch ajax demo modal"(我必须刷新以使其消失).
Originally I found techniques that used show.bs.modal here on StackOverflow, as I did my research to build my website. I stripped down my code as simple as I could for testing purposes, so I can replicate it here in this question. In the following code, the button titled "Launch demo modal" will open and close, but the "Launch ajax demo modal" will only open (I have to refresh to make it go away).
我一直非常努力地遵循Bootstrap的建议，即如何安排链接和对它们库的引用.请注意， show.bs.modal "on"功能中涉及一个名为 test-modal.php 的文件.
I've worked very hard to follow Bootstrap's advice on how to arrange the links and references to their libraries. Please notice there is a file called test-modal.php involved in the show.bs.modal "on" function.
请在下面查看我尝试的简化测试代码:
Please see the stripped down test code that I am trying, below:
<!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">×</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>
我的test-modal.php文件非常简单:
And my test-modal.php file is very simple:
<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">×</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变量发送到打开的模态的另一种方法?我已经坚持了很长时间，所有建议都非常感谢.请让我知道是否需要提供更多信息.
Has anyone else experienced this issue where the modal won't close like it normally should? Is there something in Bootstrap 4 that is deprecated, so that this is not supposed to work like it used to? Or is there an alternative way I should be sending POST variables to an opened modal? I've been stuck on this for a long time and all advice is very appreciated. Please let me know if I should include more information.
推荐答案
请勿替换整个模式标记...
Do not replace the whole modal markup...
由于事件处理程序是在加载时由Bootstrap绑定的，因此，如果您替换"它们，则新元素将不会被绑定，因为Bootstrap已经运行.
Since the event handlers are binded by Bootstrap on load, if you "replace" them, the new elements won't be binded because Bootstrap already ran.
只需在Ajax 成功回调中使用 $('#exampleModal2 .modal-body').html(data); 加载模态主体即可.
Just load the modal's body using $('#exampleModal2 .modal-body').html(data); in the Ajax success callback.
如果您想更改标题，可以使用:
If you wish to change the title, you can do it using:
$('#exampleModal2 .modal-title').html("Ajax loaded this new title.");
如果您需要从服务器资源发送标题和正文内容，请查找JSON数据响应.
Look for a JSON data response, if you need to send the title AND the body content from the server resource.
JSON数据格式将允许您一次发送多个数据".
;)
A JSON data format will allow you to send more than one "data" at once.
;)
这篇关于通过ajax调用打开Bootstrap 4 Modal-关闭按钮不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
