Bootstrap Modal Background CSS

Question

我想使用自举模态的背景效果，但不加载模态。但是无法正确执行。因此，Bootstrap背景幕在内部使用什么CSS ??

Answer 1

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

您可能想在显示/显示事件中添加背景：

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

并且您必须在hidden事件中删除背景：

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);
}