Question

我正在尝试使用Bootstrap打开远程模态窗口。打开模态的页面包含以下代码。

<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>

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

请帮忙

Answer 1

我认为您必须关闭第一个div并更改

上的角色属性

<div class="modal-dialog">

试试吧！

＆＃13;

<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>

＆＃13;

第二次打开它时，Bootstrap模态窗口没有关闭

1 个答案: