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

99,618

Solution 1

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

Solution 2

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

Solution 3

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

Solution 4

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

View more solutions

99,618