CODEWITHSUNDEEP
cssbootstrap-modal
Yuvaraj M
Yuvaraj M

Reputation: 115

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 ??

Upvotes: 2

Views: 25488

Answers (3)

Adrita Sharma
Adrita Sharma

Reputation: 22213

You can try like this as well:

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

Upvotes: 0

Rongrong Luo
Rongrong Luo

Reputation: 402

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

Upvotes: 2

Nifal Munzir
Nifal Munzir

Reputation: 364

here you go.

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

Upvotes: 1

Related Questions