Is there a way to add a blurred background for Bootstrap 4 modals?
I had the idea of wrapping everything on the site in one container (navbar, content, and footer), and then applying filter:blur(4px) to it when body.modal-open is activated.
However, I ran into an issue with a fixed navbar - when you open a modal while scrolled halfway down the page, the navbar disappears completely.
Does anyone know why this happens or how to resolve it?
This is the structure of the HTML:
<div id="content-container">
<nav class="navbar fixed-top">
<!--some nav elements -->
</nav>
<main>
<!-- content goes here -->
</main>
<footer>
<!-- some footer -->
</footer>
<div>
<div id="modal-container">
<!-- Modals go here -->
<div>
Here is the CSS used:
body.modal-open #content-container{
filter: blur(4px);
-webkit-filter: blur(4px);
-moz-filter: blur(4px);
-o-filter: blur(4px);
-ms-filter: blur(4px);
}
You can view a sample on codepen: https://codepen.io/danmoreng/pen/WVpzOm