Bootstrap 模态窗口在我第二次打开时没有关闭答案

【问题标题】：Bootstrap modal window does not close the second time that I open itBootstrap 模态窗口在我第二次打开时没有关闭
【发布时间】：2016-11-21 12:55:01
【问题描述】：

我正在尝试使用 Bootstrap 打开一个远程模式窗口。打开modal的页面有如下代码。

<a class="test" href="" data-toggle="modal" data-target="#myModal">Test</a>

<div class="modal-container"></div>

<script type="text/javascript">
    $(document).ready(function () {
        $('.test').click(function () {
            $('.modal-container').load(url, function (result) {
                $('#myModal').modal('show');
            });
        });
     });
</script>

远程页面有如下代码

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">
            ... remote 
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
    </div>
</div>

我遇到的问题是第一次远程调用模式时，它会正常打开和关闭，但如果我想再次打开它，它不会关闭。如果模态（相同的代码）是在本地定义的，它可以正常工作。

请帮忙

【问题讨论】：

小提琴可能对我们有帮助

标签： bootstrap-modal

【解决方案1】：

我认为你必须关闭第一个 div 并更改角色属性

<div class="modal-dialog">

试试吧！

<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                ... remote
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

【讨论】：