Modal window with css form. How to create a modal window in HTML5 and CSS3

Open window 1 Open window 2 Video in window 3 Photo in window 4

In the above code example, for clarity, I wrote brief explanations in the containers of modal windows. It remains for you by analogy, in div container pop-up window, place any of your content, be it simple text, pictures or videos from any third-party resource, YouTube, Vimeo, etc. Links to call modal windows, you can make text, or you can design them in the form of wonderful, gradient buttons, as in the example.

Step 2. CSS

The next step, this is the most interesting, it is important to prepare all the necessary styles for our modal window, arrange appearance and add functionality. I have omitted the basic page styles so as not to confuse, and have added some comments with comments for clarity:

/ * Basic blackout and modal layer styles * / .overlay (top: 0; right: 0; bottom: 0; left: 0; z-index: 1; visibility: hidden; / * blackout background * / background-color: rgba (0, 0, 0, 0.7); opacity: 0; position: fixed; / * fixed positioning * / cursor: default; / * cursor type * / -webkit-transition: opacity .5s; -moz-transition: opacity .5s; -ms-transition: opacity .5s; -o-transition: opacity .5s; transition: opacity .5s;) .overlay: target (visibility: visible; opacity: 1;) .is-image (top: 0 ; right: 0; bottom: 0; left: 0; display: block; margin: auto; width: 100%; height: auto; / * rounding the corners of inline images * / -webkit-border-radius: 4px; -moz- border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px;) / * embedded m-media elements, frames * / embed, iframe (top: 0; right: 0; bottom: 0; left : 0; display: block; margin: auto; min-width: 320px; max-width: 600px; width: 100%;) .popup h1 (/ * heading 1 * / color: # 008000; text-align: left; text-shadow: 0 1p x 3px rgba (0,0,0, .3); font: 24px "Trebuchet MS", Helvetica, sans-serif; font-weight: bold; ) .popup h2 (/ * heading 2 * / color: # 008000; text-align: left; text-shadow: 0 1px 3px rgba (0,0,0, .3); font: 22px "Trebuchet MS", Helvetica , sans-serif;) / *** Form modal window styles *** / .popup (top: 0; right: 0; left: 0; font-size: 14px; z-index: 10; display: block; visibility : hidden; margin: 0 auto; width: 90%; min-width: 320px; max-width: 600px; / * fixed positioning, the window is stable when scrolling * / position: fixed; padding: 15px; border: 1px solid # 383838 ; / * rounding corners * / -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; background-color: #FFFFFF; / * outer box-shadow * / -webkit-box-shadow: 0 0 6px rgba (0, 0, 0, 0.8); -moz-box-shadow: 0 0 6px rgba (0, 0, 0, 0.8); -ms-box -shadow: 0 0 6px rgba (0, 0, 0, 0.8); -o-box-shadow: 0 0 6px rgba (0, 0, 0, 0.8); box-shadow: 0px 0px 6px rgba (0, 0 , 0, 0.8); / * full transparency of the window, appearing on click * / opacity: 0; / * transition effect (appearing) * / -webkit-transiti on: all ease .5s; -moz-transition: all ease .5s; -ms-transition: all ease .5s; -o-transition: all ease .5s; transition: all ease .5s; ) / * enable the window to appear and darken the background * / .overlay: target + .popup (top: 20%; / * position of the window from the top of the page when it appears * / visibility: visible; opacity: 1; / * remove transparency * /) / * form the close button * / .close (position: absolute; top: -10px; right: -10px; padding: 0; width: 20px; height: 20px; border: 2px solid #ccc; -webkit-border-radius: 15px ; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; background-color: rgba (61, 61, 61, 0. eight); -webkit-box-shadow: 0px 0px 10px # 000; -moz-box-shadow: 0px 0px 10px # 000; box-shadow: 0px 0px 10px # 000; text-align: center; text-decoration: none; font-weight: bold; line-height: 20px; / * set values ​​and transition effect on hover * / -webkit-transition: all ease .8s; -moz-transition: all ease .8s; -ms-transition: all ease .8s; -o-transition: all ease .8s; transition: all ease .8s; ) .close: before (color: rgba (255, 255, 255, 0.9); content: "X"; text-shadow: 0 -1px rgba (0, 0, 0, 0.9); font-size: 12px;) .close: hover (background-color: rgba (252, 20, 0, 0.8); / * twist the button on hover * / -webkit-transform: rotate (360deg); -moz-transform: rotate (360deg); -ms -transform: rotate (360deg); -o-transform: rotate (360deg); transform: rotate (360deg);) / * optional when adding attachments * / .popup p, .popup div (margin-bottom: 10px;)

As you can see, dear friends, everything is pretty simple and no unnecessary mess. If you do everything correctly, you will get in your arsenal, a wonderful modal pop-up window in which you can place any content, be it text content, photos, various registration forms and feedback, or video from any third-party source. Experiment with the parameters, modify the window as your heart desires, and, if possible, share your best practices, as well as problems that suddenly arise, in the comments.

Modals are a commonly used tool in the webmaster's arsenal. It is very well suited for solving a large number of tasks, such as displaying registration forms, ad units, messages, and so on.

But despite the important place in information support project, modals are usually implemented in JavaScript, which can create problems when expanding functionality or providing backward compatibility.

HTML5 and CSS3 allow you to create modals with extraordinary ease.

HTML markup

The first step towards creating a modal is simple and effective markup:

Open modal window

Inside a div element the content of the modal is placed. You also need to arrange a link to close the window. For example, let's post a simple heading and a few paragraphs. The complete markup for our example would look like this:

Open modal window

Styles

Create a class modalDialog and we begin to shape the appearance:

ModalDialog (position: fixed; font-family: Arial, Helvetica, sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba (0,0,0,0.8); z-index : 99999; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; display: none; pointer-events: none;)

Our window will have a fixed position, that is, it will move down if you scroll the page while the window is open. Also, our black background will expand to fill the entire screen.

The background will have a slight transparency, and will also be positioned on top of all other elements by using the property z-index.

Finally, we set up transitions for displaying our modal window and hide it in an inactive state.

Maybe you don't know the property pointer-events, but it allows you to control how the elements react to the mouse click. We set the value to its value for the class modalDialog, since the link should not respond to mouse clicks when the pseudo class is active “: Target”.

Now we add the pseudo class : target and styles for the modal window.

ModalDialog: target (display: block; pointer-events: auto;). ModalDialog> div (width: 400px; position: relative; margin: 10% auto; padding: 5px 20px 13px 20px; border-radius: 10px; background: # fff; background: -moz-linear-gradient (#fff, # 999); background: -webkit-linear-gradient (#fff, # 999); background: -o-linear-gradient (#fff, # 999); )

Pseudo class target changes the display mode of the element, so our modal will be displayed when the link is clicked. We also change the value of the property pointer-events.

We define the width of the modal and the position on the page. Also define a gradient for the background and rounded corners.

Close the window

Now we need to implement the functionality of closing the window. We form the appearance of the button:

Close (background: # 606061; color: #FFFFFF; line-height: 25px; position: absolute; right: -12px; text-align: center; top: -10px; width: 24px; text-decoration: none; font- weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px # 000; -webkit-box-shadow: 1px 1px 3px # 000; box-shadow: 1px 1px 3px # 000;) .close: hover (background: # 00d9ff;)

For our button, we set the background and text position. Then we position the button, make it round using the rounding property of the frame, and form a subtle shadow. When you hover the mouse cursor over the button, we will change the background color.

Quite often, you can find modals on sites, and they are all used for different purposes. Indeed, it is quite a powerful tool that allows you to make the site interface more interactive and user-friendly. For example, modal windows can be used for various forms, such as an authorization form, a feedback form, ordering a product, and you never know.

In this post, we will look at an example of how to make a modal simple window with using jQuery and CSS. The peculiarity of this example is that it is not required here, well, with the exception of the jQuery library itself.

Place the modal code on the page:

As you can see from the markup, the block of the modal window itself is a div with an id = attribute modal_form which contains a span element with id = modal_close... This element will serve as a button to close the modal window, in addition, below the block there is a div with the id = attribute overlay, which serves at the same time to darken the background. The modal window will open by reference, with the class modal.

CSS for modal window

#modal_form (width: 300px; height: 300px; border-radius: 5px; border: 3px # 000 solid; background: #fff; position: fixed; top: 45%; left: 50%; margin-top: -150px; margin-left: -150px; display: none; opacity: 0; z-index: 5; padding: 20px 10px;) #modal_form #modal_close (width: 21px; height: 21px; position: absolute; top: 10px; right: 10px; cursor: pointer; display: block;) #overlay (z-index: 3; position: fixed; background-color: # 000; opacity: 0.8; -moz-opacity: 0.8; filter: alpha (opacity = 80) ; width: 100%; height: 100%; top: 0; left: 0; cursor: pointer; display: none;)

For modal_form we set a fixed width and height and then centered the position to the center of the screen. For a modal underlay ( overlay) we set the size to the width of the screen, fill with transparency, and also hide it by default. A special moment with z-index, the modal should have the largest of all the elements on the page, and the cover should have the largest of all but the modal itself.

Now to the most basic, this is the javascript code. For the modal window, two main events will be used, this is its opening - clicking on an element with the class modal, in our case this is a link, and closing the modal window is a click on the cover ( overlay), or click on the close button, in our case it is a span element with id = modal_close.

$ (document) .ready (function () ($ (". modal"). click (function (event) (event.preventDefault (); $ ("# overlay"). fadeIn (400, // animate showing the cover function () (// then show the mod. window $ ("# modal_form") .css ("display", "block") .animate ((opacity: 1, top: "50%"), 200);)); )); // close the modal window $ ("# modal_close, #overlay"). click (function () ($ ("# modal_form") .animate ((opacity: 0, top: "45%"), 200, // decrease opacity function () (// after animation $ (this) .css ("display", "none"); // hide the window $ ("# overlay"). fadeOut (400); // hide the tray) );));));

With animate we change the vertical position top, as well as transparency opacity, and with this we get an interesting effect. A similar effect is used both when the window is opened and when it is closed. The difference is that the order of applying properties for blocks is changed, thereby visualizing the opening and closing of the window.