There is a button on which the modal window pops up. How to make the background behind the window obscured and blurred using styles?

function toggle(el) { el.style.display = (el.style.display == 'none') ? '' : 'none' } 
 .application { box-shadow: 0 0 10px #777; position: fixed; top: 50%; width: 100%; } .application .close { cursor: pointer; position: absolute; top: 5px; right: 5px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="order-call" onclick="toggle(hidden_content)">Заказать звонок</button> <section class="application" id="hidden_content" style="display:none;"> <div class="container"> <h4>Перезвоним вам через 5 минут!</h4> <a class="close" onclick="toggle(hidden_content)">X</a> <p>Заявка на выезд специалиста</p>; </div> </section>

    2 answers 2

    Use underlay and filter: blur(2px); :

     function toggle(el) { el.style.display = (el.style.display == 'none') ? '' : 'none' } 
     .application { box-shadow: 0 0 10px #777; position: fixed; top: 50%; width: 100%; } .application .close { cursor: pointer; position: absolute; top: 5px; right: 15px; } .container { position: relative; z-index: 10; background: #fff; padding: 1rem; } .application:before { content: ''; position: fixed; z-index: 2; top: 0; left: 0; right: 0; bottom: 0; background: url(http://ultraimg.com/images/Ho6hQWs.jpg) center no-repeat; background-size: cover; filter: blur(2px); } .application:after { content: ''; position: fixed; z-index: 2; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.5); } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="order-call" onclick="toggle(hidden_content)">Заказать звонок</button> <section class="application" id="hidden_content" style="display:none;"> <div class="container"> <h4>Перезвоним вам через 5 минут!</h4> <a class="close" onclick="toggle(hidden_content)">X</a> <p>Заявка на выезд специалиста</p>; </div> </section>

    You need another block overlay , which will pop up under the window, and now you should work with it.

     var overlay = document.getElementById('overlay'); function toggle(el) { el.style.display = (el.style.display == 'none') ? '' : 'none' overlay.style.display = (overlay.style.display == 'none') ? '' : 'none' } 
     .application { background: #fff; box-shadow: 0 0 10px #777; position: fixed; top: 50%; width: 100%; z-index: 11; } .application .close { cursor: pointer; position: absolute; top: 5px; right: 5px; } .overlay{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 10; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="order-call" onclick="toggle(hidden_content)">Заказать звонок</button> <section class="application" id="hidden_content" style="display:none;"> <div class="container"> <h4>Перезвоним вам через 5 минут!</h4> <a class="close" onclick="toggle(hidden_content)">X</a> <p>Заявка на выезд специалиста</p>; </div> </section> <div class="overlay" id="overlay" style="display:none;"></div>