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

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

Solution

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