38

Bootstrap use blackout when it shows modal dialog. How I make blur effect on entire background?

1
  • 2
    To save readers some time: The only way seems to be to blur the actual content. There seems to be no (simple) way to put a "blurry glass layer" over content and make everything behind that layer blurry. Also blurring the whole body is not an option as you cannot "unblur" your modal window.
    – BlaM
    May 23, 2018 at 13:51

6 Answers 6

60

You need to alter the structure of your document first. It should look something like this

<body>
   <div class="supreme-container">all your content goes here except for the modal</div>
   <div id="myModal" class="modal fade">This is your modal.</div>
</body>

And then in css

body.modal-open .supreme-container{
    -webkit-filter: blur(1px);
    -moz-filter: blur(1px);
    -o-filter: blur(1px);
    -ms-filter: blur(1px);
    filter: blur(1px);
}
2
  • 1
    There's a way to make it work in IE and Firefox detailed here. I don't know for sure that it works, though.
    – lucian
    Oct 26, 2013 at 8:17
  • If the modal inside container?
    – lifecom
    May 4, 2017 at 7:38
35

If you are using boostrap then your content is already in some kind of container. So this works for me without the need to alter may HTML or any additional JS:

.modal-open .container-fluid, .modal-open  .container {
    -webkit-filter: blur(5px) grayscale(90%);
}
2
  • 8
    this is the best solution. Dec 20, 2016 at 9:50
  • 3
    I tried this one, but did not really do the trick (I'm using React and React Bootstrap). What I did based on your answer and worked for me: body.modal-open #root { -webkit-filter: blur(5px) grayscale(90%); } Aug 17, 2017 at 7:47
18

For me I was Opening One Modal after another so No solution were working on Second modal and below CSS Worked on every time in every modal:

.modal-backdrop{
   backdrop-filter: blur(5px);
   background-color: #01223770;
}
.modal-backdrop.in{
   opacity: 1 !important;
}
9

I think the easiest way to achieve this is to apply a blur class to background elements using jQuery when the modal is open. Remove blur when the modal is closed...

.blur {
    box-shadow: 0px 0px 20px 20px rgba(255,255,255,1);
    text-shadow: 0px 0px 10px rgba(51, 51, 51, 0.9);
    transform: scale(0.9);
    opacity: 0.6;
}

http://bootply.com/74705

5

With Bootstrap 4 this CSS snippet did the trick for me:

.modal.fade.show {
    backdrop-filter: blur(5px);
}
0
0

For me, the following solution is working fine

.modal-open .container-fluid, .modal-open  .container {
  -webkit-filter: blur(1px);
  -moz-filter: blur(1px);
  -o-filter: blur(1px);
    -ms-filter: blur(1px);
    filter: blur(1px);
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.