时间戳

首页 > 解决方案 > 单击按钮时模态卡在`.backdrop`中

jquery - 单击按钮时模态卡在`.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淡入中。像这样： 我无法单击关闭按钮来关闭模态；它只是卡住了。有什么明显的我在这里做错了吗？我想知道这两种模式之间是否存在一些冲突，但我不确定。有没有办法解决这个问题？在此处输入图像描述

标签： jquerytwitter-bootstrap-3modal-dialogfadein

解决方案

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

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

推荐阅读