Last Updated:

Modal windows with blurred background on CSS3

Modal windows are an integral part of modern web design, with their help, the developer can resort to the method of looping on one page and not throwing the visitor to auxiliary pages. In this tutorial, we'll look at how to create great modal windows with blurry backgrounds for your site using jQuery and CSS3. Thanks to these rules, we will create a blurred background when the window appears, which will tie the visitor's eyes only to the necessary information on the site.

 

Many different free templates you can find on the website of our partners, there are also premium templates with round-the-clock technical support and help in setting up:

 

The animation of the window will be set in such a way that when you click on the kmop appear, the window will carry out animation from top to bottom, while automatically increasing the blurriness of the background.

Step 1. HTML

 

We'll have a container that will contain: title, description, then we add a class for a button with a toggleModal class to open a modal window:

<div class="container">
<article>
<h2>Header</h2>
<p>Description</p>
<div align=right><button class="toggleModal">Toggle Article</button></div>
</article>
</div>
</div>
<div class="modal is-active">
<div class="modal_header">
<div class="inner">
<h2>Title for the window</h2>
</div>
</div>
<div class="modal_content">
<div class="inner">
<p>Tabs are a very interesting and handy thing when creating a site, it allows you to properly organize information, while saving some space on the site.
</p>
</div>
</div>
<div class="modal_footer">
<div class="inner">
<button class="toggleModal">Close</button>
</div>
</div>
</div>

Next, we need to add a modal is-active class, this class will be responsible for calling the modal window, modal__header is responsible for the title and its stylization of the window.

Simple modal windows with blurred background on CSS3

Step 2. CSS

Let's move on to styling, the first step will be the button class, which will be responsible, as you guessed, for the buttons on the site, we set the correct display parameters for it:

 

 

Next, we set the general parameters for the container, note, we need to set the parameters for media queries so that the window corresponds to the size of the device's browser resolution.

 

Styles are quite simple, they are stored as a separate file and should not cause difficulties when editing them for a developer who has ever encountered CSS.

Step 3. JS

Our last, but not least important, will be the installation of automatic background blur when the menu appears, as well as clickability of links, in this we will help small rules

JS:

$('body').addClass('is-blurred');


$('.toggleModal').on('click', function (event) {
event.preventDefault();


$('.modal').toggleClass('is-active');
$('body').toggleClass('is-blurred');
});

 

As a result, we get wonderful modal windows that are pleasant for the eyes of the presenter and do not pile up your design.

That's it. Ready!