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

twitter-bootstrap bootstrap-modal blur
eugenes picture eugenes · Oct 24, 2013 · Viewed 77.7k times · Source

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

Answer

lucian picture lucian · Oct 24, 2013

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

Related questions

Vertically centering Bootstrap modal window

I would like to center my modal on the viewport (middle) I tried to add some css properties .modal { position: fixed; top:50%; left:50%; } I'm using this example http://jsfiddle.net/rniemeyer/Wjjnd/ I tried $("#MyModal").modal('show').css( { 'margin-top': function () { …

Read More
Capture close event on Bootstrap Modal

I have a Bootstrap Modal to select events. If the user clicks on the X button or outside the modal, I would like to send them to the default event. How can I capture these events? This is my HTML …

Read More
Change header background color of modal of twitter bootstrap

I am trying to change the background color of modal header of twitter bootstrap using following css code. .modal-header { padding:9px 15px; border-bottom:1px solid #eee; background-color: #0480be; } .modal-header .close{margin-top:2px} .modal-header h3{margin:0;line-height:30px} But this code …

Read More