使用jQuery .load后，Bootstrap 4 Modal将不会关闭

问题描述：

我已经转移到Bootstrap 4 beta 3，但是我遇到了一个关于模式的烦人的问题；显示的模态不会关闭我单击的内容.

I have moved to Bootstrap 4 beta 3 but I am facing an annoying issue with modal; the modal after it shows will not close what ever I click.

模态遥控器已随BS4一起删除，因此单击按钮后，我使用jquery .load()加载模态内容.

The Modal remote has been removed with BS4 so I used jquery .load() to load the modal contents once the button is clicked.

这是我的主页:

<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文件中的代码，用于加载模式内容:

this is my code in .js file to load the modal contents:

/* To load modal */
function loadAddProjectModal() {
    $("#myModal").load('include/modal_addProject.php');
}

最后是模态内容modal_addProject.php:

and lastly is the modal content 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">&times;</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个不同的主机提供商，并且都遇到了同样的问题.

I have tried this locally using "Wampserver" and it's working as it should be, however after uploading my site to host it will never close, I tried 2 different host providers and both have the same issue.

答

模式已打开，然后加载了内容，因此关闭按钮没有事件侦听器.

The modal is opened and then the content is loaded so the close buttons don't have event listeners.

删除href="#myModal"或data-target="#myModal"并在加载回调中手动触发模式:

Remove href="#myModal" or data-target="#myModal" and manally trigger the modal in the load callback:

function loadAddProjectModal() {
    $("#myModal").load('include/modal_addProject.php', function() {
        $("#myModal").modal('show');
    });
}

使用jQuery .load后，Bootstrap 4 Modal将不会关闭

相关推荐