单击按钮时模态卡在“.backdrop”中

如何解决单击按钮时模态卡在“.backdrop”中

我有 2 个 Bootrap 模态。当页面加载时使用一点 jQuery:

<script type="text/javascript">
    $(window).load(function () {
        $('#myDisclaimerModal').modal('show');
    });
</script>
....
<div class="container">
    <!-- Trigger the modal with a button -->
    <!--<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>-->
    <!-- Modal -->
    <div class="modal fade" id="myDisclaimerModal" role="dialog">
        <div class="modal-dialog modal-dialog-centered" tabindex="-1">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header" style="background-color: #428bca; color: white; border-top-left-radius:3px; border-top-right-radius: 3px;">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title" style="text-align: center;">Disclaimer</h4>
                </div>
                <div class="modal-body">
                    <p>Lorem Ipsum blah,blah,blah...</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>

第二个像基于简单按钮点击的弹出窗口一样控制：

<div class="container">
    <div id="info-button"
         class="esri-widget esri-widget--button esri-interactive"
         title="Info"
         data-toggle="modal" data-target="#infoWidgetDiv">
        <span class="esri-icon-description"></span>
    </div>
    <!-- Trigger the modal with a button -->
    <!--<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>-->
    <!-- Modal -->
    <div class="modal fade" id="infoWidgetDiv" role="dialog">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Modal Header</h4>
                </div>
                <div class="modal-body">
                    <p>This is a large modal.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>

点击按钮时出现问题。模态尝试启动，但卡在 .backdrop 淡入中。像这样：

我无法点击关闭按钮来关闭模态；它只是卡住了。有什么明显的我在这里做错了吗？我想知道这两种模式之间是否存在一些冲突，但我不确定。有没有办法解决这个问题？

• 注意：我使用的是旧版本的 boostrap 3.2

解决方法

由于模态背景的 css 是问题的根源，我能够推导出一个简单的基于 css 的解决方案。在我的 main.css 中，我只是添加了以下内容并且它起作用了。这基本上是一个 z-index 问题：

.modal-backdrop {
    z-index: -1;
}