How to make modal dialog with blur background using Twitter Bootstrap?

Question

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

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 '18 at 13:51

score 60 · Accepted Answer · answered Oct 24 '13 at 17:33

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

answered Oct 24 '13 at 17:33

lucian

823
1
8
12

1

There's a way to make it work in IE and Firefox detailed [here](http://stackoverflow.com/a/15813429/1563940). I don't know for sure that it works, though. – lucian Oct 26 '13 at 08:17
If the modal inside container? – lifecom May 04 '17 at 07:38

score 36 · Answer 2 · answered Jun 17 '16 at 11:50

36

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

answered Jun 17 '16 at 11:50

Gabriel Bratescu

389
3
4

8

this is the best solution. – Munam Yousuf Dec 20 '16 at 09: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%); }` – Thomas Vuillaume Aug 17 '17 at 07:47

score 18 · Answer 3 · answered Nov 15 '19 at 07:31

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

score 9 · Answer 4 · answered Oct 24 '13 at 17:41

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

score 5 · Answer 5 · answered Jun 12 '22 at 08:42

5

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

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

answered Jun 12 '22 at 08:42

gil.fernandes

12,978
5
63
76

score 0 · Answer 6 · answered Mar 12 '19 at 10:54

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

answered Mar 12 '19 at 10:54

Sachin from Pune

656
8
19

How to make modal dialog with blur background using Twitter Bootstrap?

6 Answers6