Bootstrap 模式启用背景

Question

我希望我的引导模式打开，但后台页面仍然可以点击。

我尝试了网络和 stackoverflow（如 How do I make the background of a modal clickable）上的一些解决方案，但我无法让它工作。我正在使用 Firefox 和 IE11。

我尝试实现的目标：在页面侧面有一个按钮，用于打开模式，处理模型内容，通过单击标题中的按钮关闭模式或使用点击打开模式的按钮。

有一个working Bootply example，我尝试从中改编一些东西，但到目前为止没有多大成功。

这是我已经走了多远：
模态
（下面的 html 是用 javascript 生成的，我只是给你输出以提高可读性）

 <div id="bootstrapModal" class="modal fade" tabindex="-1" role="dialog">
        <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>
                </div>
                <div class="modal-body">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success " id="submitButton">Submit</button>
                    <button type="button" class="btn btn-danger" data-dismiss="modal" >Cancel</button>
                </div>
            </div>
        </div>
    </div>

Javascript

var modal = $('#bootstrapModal');
$('.modal-backdrop', modal).css('display', 'none');
$('.modal-dialog',modal).css('pointer-events', 'none');
$('.modal-content',modal).css('pointer-events', 'all',);

$(modal).modal('show');

我得到的是一个没有背景但可以与背景交互的模态（背景看起来是活动的，但不是）。我用

得到同样的效果

$(modal).modal({backdrop: 'static', keyboard: false});

或者在将backdrop 中的'static' 替换为false 时。

有什么想法吗？

Answer 1

您必须更改/覆盖 .modal 类。当您的窗口打开时，如果您使用 Web 检查器检查背景，您将看到所有内容都包含在具有以下类的 div 中：modal、fade 和 在。 "modal" 类具有以下 css 属性，将其设置为覆盖整个屏幕，使您的网站无法点击。

.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
}

您必须删除 fixed 属性或修改 top、right、bottom 和 >左属性。但是，如果您删除了固定属性，您将无法使用 z-index 属性，该属性会为您的弹出窗口提供叠加效果。

Answer 2

如果我理解你的问题，你必须把 div 放在模型后面，并给它整个页面的宽度和高度