Bootstrap模式启用背景

Question

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

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

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

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

这是我有多远:
Modal
(下面的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});

或更换时'static'在backdrop与false.

有任何想法吗？

Answer 1

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

您必须删除固定属性或修改顶部、右侧、底部和左侧属性。但是，如果删除了固定属性，您将无法使用 z-index 属性，这会给您的弹出窗口带来覆盖效果。