Last Updated:

Beautiful pop-up dialog boxes.

It is impossible to imagine full-fledged dynamic pages without beautiful pop-up windows – pop-up. Therefore, in this article we will look at several options for creating and appearing pop-up on the site page. We will not dwell on what a pop-up window is. With all confidence, I will say that you have repeatedly encountered them and know what they are.

We will not go around and around, but immediately get down to business - let's set the task of what we want to get at the output.

So, let's create beautiful pop-ups with animation effects: and , which will be applied to both the overlay and the window itself. To create animation effects, we will use ONLY CSS3.fadeslide

I'm also sure that you have had to deal with situations where different pop-up windows could be displayed on the same page, containing, respectively, different information. This is often found in landing pages, when one pop-up contains an order form, and the other offers to enter data to contact you. Let's do the same.

Now it's time to talk about the controls we'll do for the pop-up.

  1. Open a pop-up window. The same pop-up can be opened by clicking on different interactive elements located in different places of the page.

  2. Close the pop-up window. We will close pop-up in three ways:
    — first, in the standard way, by clicking on the cross in the upper right corner of the pop-up window;
    – secondly, by clicking on any place on the screen outside the pop-up window, i.e., by an overlay that overlaps and shades the content of the page and, at the same time, occupies the entire screen area, having a width and height of 100%;
    - Third, the .Esc

So, it seems that everything has been decided and let's now proceed to the creation of the pop-up window itself.

THE HTML markup of the pop-up window.

We will not create a complex layout in HTML. Let's create an overlay, two pop-ups, and two pop-up buttons for each pop-up that will open them. The layout will be almost the same for all options for the animation of opening and closing pop-ups.

Let's start with the interactive elements – the buttons that will open our pop-up windows:

Pay attention to the attribute that is spelled out for each button. It specifies the pop-up window that this button opens.[data-modal]id

You've probably noticed that some elements ( and ) have the attribute . You can use this attribute to identify all elements on the page that can close pop-up windows. In particular, it is a cross in the upper right corner of the corresponding pop-up.<div class="overlay"><span class="closer">[data-close]<span class="closer">

A style sheet for pop-ups.

Here are only the styles related to animation in CSS3, all our main task is to pump the skill of JavaScript ownership. To make the style sheet shorter and more readable, I will not use vendor prefixes.

You can take the full code of the style sheet from the archive. Let's note here only some of the features.

Both the substrate and the pop-up window are set. Why? First, their positioning will be carried out relative to the borders of the screen, and not the document. Secondly, when scrolling the mouse wheel, the positioning of overlay and pop-up will remain unchanged.position: fixed;

The start and end position of the pop-ups.

Continuing the conversation about positioning, we will dwell in more detail on the position of the pop-up window. The open dialog box should be located in the center of the screen, regardless of the screen resolution and the size of the window itself.
We will control the position of the dialog box using the CSS properties , , .lefttoptransform

The question arises, where should the pop-up windows be in the closed state?
If the window will be controlled by animation, then its original position will also be in the center of the screen. Let's take another look at the styles for this window:fade

A modal window that uses an effect animation must be outside the top of the screen. To ensure this positioning, we need to use the following styles:slide

With these property values, the bottom border of the pop-up window will coincide with the upper border of the screen. But that's not enough. A shadow with a blur radius of 20px is added to the modal window using the property. This shadow will pop out from under the top of the screen.

To eliminate this disadvantage, change the property values to -20px. Now the lower border of the shadow will coincide with the upper border of the screen.toptransformbox-shadowtop

I want to remind you once again that sharing CSS properties , , with such values, allows you to position a pop-up window regardless of its size, as well as the size of the screen. This makes our code more flexible, independent and versatile.lefttoptransform

Write JavaScript to control pop-ups using CSS3.

And now we have reached the most important thing - writing a script in pure JavaScript, which will control the appearance and disappearance of pop-ups. Let's start, as usual, with limiting the scope and place the script in an anonymous self-starting function.

The first thing we need to do is to declare a few constants and variables that are very important for the normal functioning of the script and assign them values.

Open a pop-up window.

Now you need to hang an event handler on each item from the collection. After the handler is triggered, we determine which window should be opened and run the function that will open the pop-up we need. We will work around the collection using the method , and we will register the handler using the method :mOpenmodalShowfor...ofaddEventListener

Let's now consider the steps of the function .modalShow

  • 1

    Add a class to the overlay. This class creates an animation - the smooth appearance of the substrate within 0.4 seconds. First (if any) delete the class ..fadeIn.fadeOut

  • 2

    Determine the type of animation that appears in the pop-up window. This type is spelled out in the variable . At the layout stage, it is necessary at the very bottom of the page, before the tag , but above the connection code of the js-script, which we are now writing, add one of two lines that determine the type of animation of the pop-up window appearance:typeAnimate</body>

    If you add a pop-up object to a class by first removing (if any) the .
    If , then add the class , and remove the class . typeAnimate === 'fade'modal.fadeIn.fadeOuttypeAnimate === 'slide'.slideInDown.slideOutUp

  • 3

    Raise the flag, assigning it the value . This flag indicates that the pop-up window is open.mStatustrue

Full function code :modalShow

So, as a result of the work of our function, we see an overlay in the entire screen size, obscuring the main content, and a pop-up window in the center of the screen.

Close the pop-up window.

Now we need to write a function that will close both the substrate and the pop-up.
At the very beginning of the script, we created a collection of elements whose clicks will close the pop-up window. To do this, you must hang an event handler on each element. We will again use the methods of and . If an event occurs, the function .mClosefor...ofaddEventListenerclickmodalClose

Earlier we decided that we would close the pop-up window not only by clicking on the elements of the page, but also by pressing the button. Let's then hang an event handler on it using the same method.EscaddEventListener

Finally, it's time to understand how the function . The function itself is not complex and resembles the function . The main difference between the two is that the function code is inside the condition:modalClosemodalShowmodalClose

The function code will start executing if there is an open pop-up window (that's why we needed the flag) and there is no event of a keystroke or key pressed (its code is 27).mStatusEsc

We figured out how to open and close a beautiful pop-up window using an animation based on CSS3. I just want to add that according to the same principle, you can make pop-up appearances from behind the lower or side border of the browser window.