Question

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

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

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

我有一个working Bootply example尝试调整内容，到目前为止没有取得多大成功。

这是我有多远：
的模态
（下面的html在javascript中生成，我只是为了提高可读性而给你输出）

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

的Javascript

'static'

我得到的是一个没有背景的模态，但有可能与背景交互（背景看起来像是活跃的，但事实并非如此）。我用

得到了同样的效果

backdrop

或用false替换START M1 M2 F1 F2 M1 -|P|--|/|--|/|--|/|--|/|--(S) STOP M1 M2 M1 F1 -|N|--| |--|/|--(R)--(S) START M1 M2 F1 F2 M2 -|P|--|/|--|/|--| |--|/|--(S) STOP M1 M2 M1 F2 F1 -|N|--|/|--| |--(R)--(S)--(R) START M1 M2 F1 F2 M1 M2 F2 -|P|--|/|--|/|--|/|--| |--(S)--(S)--(R) STOP M1 M2 M1 M2 -|N|--| |--| |--(R)--(R)-中的{{1}}。

有什么想法吗？

Answer 1

您必须更改/覆盖.modal类。当您的窗口打开时，如果您使用Web检查器检查背景，您将看到所有内容都包含在具有以下类的div中：模态，淡入淡出和在即可。 “模态”类具有以下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放在模型后面，并给出页面的全宽和高度

Bootstrap模式启用背景

2 个答案: