Bootstrap Modal backdrop css

问题

I wanted to use the backdrop effect of the bootstrap modal, but without loading a modal. But am not able to do it properly. So, What css does the Bootstrap backdrop use internally ??

回答1:

Your backdrop must have a HIGHER z-index than the content you want to cover, AND a LOWER z-index than the box you want to operate(dropdown/popup/modal).

You may want to add a backdrop in the show/shown event:

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

And you must remove the backdrop in the hidden event:

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

And the CSS can be like:

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

回答2:

here you go.

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

来源：https://stackoverflow.com/questions/30323791/bootstrap-modal-backdrop-css