Bootstrap 模态背景css

Question

我想使用引导模式的背景效果，但不加载模式。 但我无法正确地做到这一点。 那么，Bootstrap 背景在内部使用什么 css ？

Answer 1

您的背景必须具有比您想要覆盖的内容更高的 z-index，并且比您要操作的框（下拉/弹出/模态）具有更低的 z-index。

您可能希望在演出/演出活动中添加背景：

$('<div class="dropdown-backdrop"/>')
.insertBefore('.yourPopupBox')
.click(function () {
    //hide the popup box here
    //$(".yourPopupBox").hide();
});

并且您必须删除隐藏事件中的背景：

var backdrop = $(".yourPopupBox").parent().find('.dropdown-backdrop');
if (backdrop) {
    backdrop.remove();
}

CSS 可以是这样的：

.dropdown-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  //background-color: rgba(0,0,0,0.7);
  z-index: 990;
}

Answer 2

干得好。

<div id="backdrop" style="position: fixed;width: 100%;height: 100%;
background: rgba(0,0,0,0.7);"></div>

Answer 3

你也可以这样尝试：

.dropdown-backdrop {
    backdrop-filter: blur(5px) contrast(.1);
}