[英]Bootstrap 4 Modal will not close after using jquery .load
我已经转到Bootstrap 4 beta 3,但是我遇到了一个关于模式的烦人的问题。 显示的模态不会关闭我单击的内容。
模态遥控器已随BS4一起删除,因此单击按钮后,我使用jquery .load()加载模态内容。
这是我的主页:
<div class="container-fluid">
<div class="row">
<div class="col-md-1 sidenav">
<ul>
<?php include("include/menu.inc.php"); ?>
</ul>
</div>
<div class="col-md-11 offset-md-1 p-4">
<h1 class="pb-2">Projects List</span>
<a class="pull-right" title="Add Project" data-toggle="modal" href="#myModal" onClick="loadAddProjectModal()">
<i class="fa fa-plus text-muted" aria-hidden="true"></i>
</a>
</h1>
</div>
</div>
</div>
<!--Modals-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"></div>
这是我在.js文件中的代码,用于加载模式内容:
/* To load modal */
function loadAddProjectModal() {
$("#myModal").load('include/modal_addProject.php');
}
最后是模态内容modal_addProject.php:
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myModalLabel">Add New Project</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<p>Test</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
我已经在本地使用“ Wampserver”进行了尝试,并且可以正常运行,但是在上载我的网站进行托管之后,它永远都不会关闭,我尝试了2个不同的主机提供商,并且都遇到了同样的问题。
模态被打开,然后内容被加载,因此关闭按钮没有事件监听器。
删除href="#myModal"
或data-target="#myModal"
并在加载回调中手动触发模式:
function loadAddProjectModal() {
$("#myModal").load('include/modal_addProject.php', function() {
$("#myModal").modal('show');
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.