Bootstrap模式启用背景

Question

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

网上有一些解决方案和stackoverflow（比如我如何制作模式可点击的背景 ）我试过但我无法让它工作。 我正在使用Firefox和IE11。

我尝试实现的目标 ：在页面的侧面打开模式，使用模型内容执行操作，通过单击标题中的按钮或单击打开模式的按钮来关闭模式 。

有一个工作的Bootply示例 ，我尝试从中调整内容，到目前为止没有太大的成功。

这是我有多远：
语气
（下面的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});

或者用false替换backdrop 'static' 。

有任何想法吗？

Answer 1

您必须更改/覆盖.modal类。 当您的窗口打开时，如果您使用Web检查器检查背景，您将看到所有内容都包含在具有类的div中： modal ， fade和in 。 “ 模态 ”类具有以下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;
}

您必须删除固定属性或修改顶部 ， 右侧 ， 底部和左侧属性。 但是，如果删除了固定属性，则无法使用z-index属性，这会为弹出窗口提供叠加效果。

Answer 2

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