Menu
Bootstrap use blackout when it shows modal dialog. How I make blur effect on entire background?
243
Hi this example shows the basic effect - click "Click here" and a popup appears over a blurred background. it uses: filter: blur(2px); The layer is able to blur the text inside the layer but not the background text.
Modals are built with HTML, CSS, and JavaScript. They're positioned over everything else in the document and remove scroll from the <body> so that modal content scrolls instead. Clicking on the modal “backdrop” will automatically close the modal. Bootstrap only supports one modal window at a time.
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); } 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%); } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
