Bootstrap模态背景css

Question

我想使用bootstrap模态的背景效果，但不加载模态。但我不能正确地做到这一点。那么，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);
}