How to make the modal CSS window. Create a modal window using HTML5 and CSS3. We will deal with the dimming
In this lesson, we learn how to create a modal window using HTML5 and CSS3. In the lesson, we will not use JS, only fully CSS3. Modal windows can be used for form feedbackFor photo and video and there are many options for its use.
We start making our modal window.
Step 1. HTML markup
First of all, we need to make HTML markup, i.e. Make a link to which window will open, and make the frame of our window. To do this, write this code:
Step 2. Content modal window
Now add the content itself of our window. We will make a title and a small text and put it all in the tag Redstar - Project dedicated to questions that have been interested in so long ago. This project contains free lessons and articles on various topics. Themes are very diverse, ranging from simple windows installations And ending with the development of sites. Step 3. Styles Now we start writing styles for our window. In this step we will make an invisible window. It will only appear by clicking on the link. For this we write styles for our class modaldialog.: 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; Opacity: 0; -WebKit-Transition: Opacity 400ms Ease-in; -moz-transition: Opacity 400ms Ease-in; Transition: Opacity 400ms Ease-in; Display: None; Pointer-Events: none;) Step 4. Functional and viewing In this step, we will make our window already start functioning. To do this, add a few more styles for our class. modaldialog.: Modaldialog: Target (Opacity: 1; Pointer-Events: auto; display: block;) .modaldialog\u003e div (width: 400px; position: relative; margin: 10% auto; padding: 5px 20px 13px 20px; Border-Radius: 10px ; background: #FFF; Background: -moz-linear-gradient (#FFF, # B8ECFB); Background: -Webkit-linear-gradient (#FFF, # B8ECFB); Background: -O-Linear-gradient (#FFF, # B8ECFB);) At this step you can already view your window, it is already functions. But, button close. It looks not very beautiful. Now we need to add styles for our class close.. Step 5. We make the Close button In this step we will improve appearance Our button that will close our window. For this we write styles for our class close.: 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: # 860015;) Well, now our button looks like and thought. You should also look like: This lesson is over. Thanks for attention! For your convenience, I added a demo version and source files. If, something is not clear, then download the source files. Hello everyone, I will tell about one very comfortable thing, which is called a modal window, we will analyze how to make a modal window? Many do not understand what it is, I will try to explain the language that is clear for you, in other words, is a pop-up window when you click on the button or text. Inside this window, there may be any information (video, picture, code, etc.) I now started using a modal window, as there is some kind of material that you need to say that it is not highlighted on the page and let's say, there was a picture, When you click on it, a window and information came up. I recently did it on one site, I inserted a picture on the main thing, not even a picture and the screenshot from the video of YouTube, and when you click the window where the video shows. An example of such a window can be seen on my game page, the principle is the same, click on the picture pops up the window with the game. I did so much to the extension of the game more in width than I have a column for content, I found such a way out of the situation. Consider the modal window on CSS, so as not to fool your head, we will use styles, then-there is pressing styles in the main file and code in our window, consider everything in detail what and how. The first thing we need is styles, copy a fully code with styles, which is lower and insert it into your main style file, then-there is in style.css Window (Position: Fixed; font-face: arial, helvetica, sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: RGBA (0,0,0,0,0,7); 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;) .window: target (Display : block; Pointer-events: auto;) .window\u003e div (width: 460px; position: relative; margin: 10% auto; padding: 30px 10px 10px; border-radius: 10px; background: #FFF; Box-Shadow: 0px 0px 20px 2px;) .Close (color: #FFFFFFF; Line-Height: 25px; position: absolute; right: -12px; text-align: center; top: -10px; width: 24px; text -Decorage: 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: # 990000;) We save, you can play with the styles, and something is more beautiful, change the background, the frame is different and so on. Go to the page where you want you to pop up this window, and insert the following code: Button Now we will analyze a little that in it, you need to change you. Where is spelled out "Button" There you can insert like a picture of Taiful text, in general what you want, then, when you click on it, a window will open. Where is spelled out there "Here will be the contents of the window" Insert the fact that you would like to see in the pop-up window, in principle, and that's it. NEWS! Well, on the track news as always, something I often became new)) I made a small page with partner ProgramIn the form, I will go to everyone to go to her and see, maybe someone will give some more advice as interesting, for example, something to supplement something, well, you understand what I'm talking about. There are still some thoughts on it, to add a video with me, can instruction, well, something like that, in general, I'm waiting for yourself comment! Judging by the comments, the topic of creating modal windows is quite popular. I have already described various vending techniques as with using jQuery.and on pure CSS. And in the Internet, information on the topic is abused, and everyone can choose for themselves the optimal option. Look a living example, test in different browsers and on various devicesMODAL windows fit perfectly into any sizes. In the example, it introduced three options for use, a standard dialog box, an integrated contact form and a built-in picture. When forming an HTML framework of the modal window was guided by the principles of building a standard HTML page, i.e. Our window consists of a base container On a row using standard HTML elements of tags and Attribute for This is nothing more than an element identifier with which communication should be connected, when using several modal windows on one page with different contents, it should be remembered that the identifier must be different, set according to id of one or another mod. windows, for \u003d "modal-1", for \u003d "modal-2", etc.
The stylistics of the appearance of the modal window reminds the style of pop-up windows from a set of Bootstrap elements, if necessary, it changes very easily in CSS. Directly B. cSS code Prescribed a brief commentary, so that you will be easier to figure out what why and why))). / * Styles of the modal window * / .modal-header H2 (Color: # 555; font-size: 20px; font-weight: normal; line-height: 1; margin: 0;) / * Closing button * / .modal window .BTN-Close (Color: #aaa; Cursor: Pointer; Font-Size: 30px; text-decoration: none; position: absolute; right: 5px; top: 0;) .modal .btn-close: hover (Color: Red;) / * Dimming Layer * / .modal-Wrap: Before: Display: None; Background: RGBA (0, 0, 0, .3); Position: Fixed; Top: 0; Left: 0 ; Right: 0; Bottom: 0; z-index: 101;) .modal-overlay (Bottom: 0; Display: None; Left: 0; Position: Fixed; Right: 0; Top: 0; Z-index: 102 ;) / * Activation of the dimming layer and modal block * / .modal-Open: Checked ~ .modal-wrap: Before ,.modal-Open: Checked ~ .modal-Wrap .modal-overlay (Display: Block;) .modal Open: Checked ~ .modal-wrap .modal-dialog (-Webkit-Transform: Translate (-50%, 0); -MS-transform: translate (-50%, 0); -o-transform: translate (-50 %, 0); transform: translate (-50%, 0); TOP: 20%;) / * Elements of the modal window * / .modal-dialog (background: #fefefe; Border: None; Border-Radius: 5px; Position: Fixed; width: 80%; MAX-WIDTH: 500px; Left: 50%; Top: -100%; -Webkit-Box-Shadow: 0 15px 20px RGBA (0,0,0, .22), 0 19px 60px RGBA (0,0,0 ,.3); -Moz-Box-Shadow: 0 15px 20px RGBA (0,0,0, .22), 0 19px 60px RGBA (0.0.0, .3); Box-shadow: 0 15px 20px RGBA (0.0.0, .22), 0 19px 60px RGBA (0,0,0 ,.3); -Webkit-transform: translate (-50%, -500%); -MS-transform: translate (-50%, -500%); -O-transform: translate (-50%, -500%); TRANSFORM: TRANSLATE (-50%, -500%); -Webkit-transition: -WebKit-Transform 0.4s Ease-Out; -Moz-transform 0.4s Ease-Out; -O-transition: -o-transform 0.4s Ease-Out; Transition: transform 0.4s Ease-Out; z-index: 103; ) .modal-body (Padding: 20px;) .modal-body p (margin: 0;) .modal-header, .modal-footer (Padding: 20px 20px;) .modal-header (Border-Bottom: #eaeaea Solid 1px;) .modal-Header H2 (Font-Size: 20px; margin: 0;) .modal-footer (Border-Top: #eaeaea Solid 1px; Text-Align: Right;) / * Adaptive pictures in the modal block * / .modal-body img (max-width: 100%; Height: auto;) / * * / .btn buttons (Background: #FFF; Border: # 555 Solid 1px; Border-Radius: 3px; Cursor: Pointer; Display: inline-block; font-size: 14px; padding: 8px 15px; text-decoration: none; text-align: center; min-width: 60px; position: relative;) .btn: hover, .btn: focus (background: # F2F2F2;) .BTN-PRIMARY (Background: # 428BCA; Border-Color: # 357EBD; Color: #FFF;) .btn-primary: hover (background: # 66A1D3;) If you do not need any of the sections, for example, there is no need for a title, just exclude For example, used a slightly modified feedback form, on which. All form elements are remarkably adjusted for window sizes when viewed on different screens of user devices. / * Contact form elements * / .textBox (Height: 45px; width: 100%; Border-Radius: 3px; Border: RGBA (0,0,0 ,.3) 1px Solid; Box-Sizing: Border Box; font -Size: 14px; padding: 8px; margin-bottom: 20px;) .Message: Focus, .textBox: Focus (Outline: None; Border: RGBA (24,149,215,1) 1px Solid; Color: RGBA (24,149,215,1); ) .Message (Background: RGBA (255, 255, 255, 0.4); width: 100%; Height: 120px; Border: RGBA (0,0,0, .3) 1PX SOLID; BOX-SIZING: BORDER-BOX; -MOZ-Border-Radius: 3px; font-size: 14px; -WebKit-Border-Radius: 3px; Border-Radius: 3px; Display: Block; Padding: 10px; Margin-Bottom: 20px; overflow: hidden;) / * Button "Submit" forms * / .btn-form (width: 100%; Height: 45px; Border: RGBA (0,0,0, .2) 1px Solid; Box-Sizing: Border-Box; Background: #dededee ; Color: # 555; Transition: Background .4s;) / * Changing the button of the button when hovering * / .btn-form: Hover (Background: # F2F2F2;) Many, very many use modal windows to demonstrate different images, so that this option also provided. Pictures embedded in the body window set 100% Max-Width width: 100%; , with automatic height definition: AUTO; With what images will be correctly displayed when the window size changes in one direction or the other, it turns out such adaptability)). To get the lightbox effect when the image fills the entire space block space, it is sufficient to remove the div header, the bottom block with the button and set the necessary indents inside the modal window, in the selector.modal-body. If suddenly, you want to place in the modal video window with Yotube, or another video service, use the way I am. It should only be remembered that the optimal solution to stop the video playback after closing the window, without connecting JS, has not yet been found, you will have to be content with not very "kosher" methods. That's all! It remains only to recall that this method It will be excellent only in modern browsers, unconditionally supporting the properties of CSS3, which is at the same time its only disadvantage. Digger in the code can be. With all respect, Andrew Modal or pop-up window (called differently) is a very common applied on the website. Its main purpose is the withdrawal of various information (mainly textual and with multiple pictures), which appears when pressed for any special object (link, button or photo). In the modal window, in most cases to save space on the site, not prescribed important information, for example, as: feedback, authorization, or. There are cases when the webmasters wish to attract the attention of the visitor with some important event, for example: to obtain bonuses and gifts, participation in promotions and draws, etc., and modal windows emerge without the participation and wishes of the visitor. Someone makes for these purposes a modal window when opening a page that appears on the page through certain gap Time Using Museum Java Script, and the other wants to leave a visitor on their website in different ways and uses a modal window when closing the page that pops up at the time when the client wants to leave and close the page. The first example of a pop-up modal window. In order to make a modal window applying only CSS, it is necessary to register HTML code for a reference object to a pop-up window and assign parameters and properties in the style of a beautiful modal window. Copy, paste and save the above code in text Document Under the name index.html and then open it in the browser to check the performance of the modal window. Here you can and correct the appearance of the modal window based on the design of your project. For example, for the output of certain information, I often use a modal window as with different animation effects, which looks somewhere more interesting. In this example, I will show how to register a button to open the modal window. An example of a button for calling a modal window (click). Modal window Button Then copy and paste HTML code modal window: Modal window First text information ... Second text information ... Subsequent text information ... And last, register beforeREDStar project
Modal window on CSS, how to make a modal window
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
. Window (Position: Fixed; Font- Family: Arial, Helvetica, Sans- Serif; Top: 0; Right: 0; Bottom: 0; Left: 0; Background: RGBA (0, 0, 0, 0.7); z- index : 99999; - WebKit - Transition: OPACITY 400MS EASE- IN; - MOZ-TRANSTION: OPACITY 400MS EASE- IN; Transition: Opacity 400ms Ease- In; Display: None; Pointer- Events: none;). Window: Target (Display: Block; Pointer- events: auto;). Window\u003e DIV (Width: 460px; Position: relative; margin: 10% auto; padding: 30px 10px 10px; Border- Radius: 10px; Background: #FFF; Box- Shadow: 0px 0px 20px 2px;). Close (background: #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: # 990000;)
1
2
3
4
5
6
7
<
a href=
"#ModalOpen"
title=
""
> Button
<
div id=
"ModalOpen"
class
=
"Window"
>
<
div>
<
a href=
"#close"
title=
"Close"
class
=
"close"
> X. Here will be the contents of the window
I'm more interested in solutions without using javascript, not because I have some kind of phobia to JS, no, I'm just interested experiments, the search for new features of the HTML + CSS bundle, especially since these possibilities have recently expanded significantly.
Hidden Cheboks () I used a couple of times when developing, why not apply the same method and to implement pop-up (modal) windows. It turns out everything is quite simple, let's consider in more detail, as with the help of properties and new syntactic features, you can quickly and without much difficulties to organize the work of attractive modal windows on the pages of your sites.HTML framework
CSS.
/ * Modal window styles * / .modal-Header H2 (Color: # 555; font-size: 20px; font-weight: normal; line-height: 1; margin: 0;) / * Window closing button * / .modal .btn-close (Color: #aaa; Cursor: Pointer; Font-Size: 30px; text-decoration: none; position: absolute; right: 5px; top: 0;) .modal .btn-close: hover ( Color: Red;) / * darkening layer * / .Modal-Wrap: Before: None; Background: RGBA (0, 0, 0, .3); Position: Fixed; Top: 0; Left: 0; Right: 0; bottom: 0; z-index: 101;) .modal-overlay (Bottom: 0; Display: None; Left: 0; Position: Fixed; right: 0; top: 0; z-index: 102;) / * Activation of the dimming layer and modal block * / .modal-Open: Checked ~ .modal-wrap: Before, .modal-Open: Checked ~ .modal-Wrap .modal-overlay (Display: Block;) .modal-Open: Checked ~ .modal-Wrap .modal-dialog (-Webkit-transform: translate (-50%, 0); -MS-transform: translate (-50%, 0); -O-transform: translate (-50%, 0); transform: translate (-50% 0); TOP: 20%;) / * Elements of the modal window * / .modal-dialog (Background: #fefefe; Border: None; Border-Radius: 5px; position: fixed; width: 80%; max-width: 500px; left: 50%; top: -100%; -WebKit-Box -Shadow: 0 15px 20px RGBA (0, 0, 0, .22), 0 19px 60px RGBA (0, 0, 0, .3); -Moz-Box-Shadow: 0 15px 20px RGBA (0, 0, 0 , .22), 0 19px 60px RGBA (0, 0, 0, .3); Box-shadow: 0 15px 20px RGBA (0, 0, 0, .22), 0 19px 60px RGBA (0, 0, 0, 0, .3); -Webkit-transform: translate (-50%, -500%); -MS-transform: translate (-50%, -500%); -o-transform: translate (-50%, -500% ); transform: translate (-50%, -500%); -Webkit-transition: -Webkit-Transform 0.4s Ease-Out; -Moz-Transition: -Moz-Transform 0.4s Ease-Out; -O-transition: -o-transform 0.4s Ease-Out; Transition: transform 0.4s Ease-Out; z-index: 103;) .modal-body (Padding: 20px;) .modal-body p (margin: 0;) .modal Header ,.modal-Footer (Pad Ding: 20px 20px; ) .modal-header (Border Bottom: #eaeaea Solid 1px;) .modal-Header H2 (Font-Size: 20px; Margin: 0;) .modal-footer (Border Top: #eaeaea Solid 1px; Text-Align : right;) / * Adaptive pictures in the modal block * / .modal-body img (max-width: 100%; Height: auto;) / * * / .btn buttons (Background: #FFF; Border: # 555 Solid 1px; Border-Radius: 3px; Cursor: Pointer; Display: inline-block; font-size: 14px; padding: 8px 15px; text-decoration: none; text-align: center; min-width: 60px; position: relative;) .btn: hover, .btn: focus (background: # F2F2F2;) .BTN-PRIMARY (Background: # 428BCA; Border-Color: # 357EBD; Color: #FFF;) .btn-primary: hover (background: # 66A1D3;)
/ * Contact form elements * / .textBox (Height: 45px; width: 100%; border-radius: 3px; border: RGBA (0, 0, 0, .3) 1px Solid; Box-Sizing: Border-Box; Font-Size: 14px; padding: 8px; Margin-Bottom: 20px;) .Message: Focus, .textbox: Focus (Outline: None; Border: RGBA (24, 149, 215, 1) 1px Solid; Color: RGBA (24, 149, 215, 1) ;) .Message (Background: RGBA (255, 255, 255, 0.4); width: 100%; Height: 120px; Border: RGBA (0, 0, 0, .3) 1PX SOLID; BOX-SIZING: BORDER-BOX ; -Moz-Border-Radius: 3px; font-size: 14px; -WebKit-Border-Radius: 3px; Border-Radius: 3px; Display: Block; Padding: 10px; Margin-Bottom: 20px; overflow: hidden;) / * Send button forms * / .btn-form (width: 100%; Height: 45px; Border: RGBA (0, 0, 0, .2) 1px Solid; Box-Sizing: Border-Box; Background: #Dedede; Color: # 555; Transition: background .4s;) / * Change the button background when hovering * / .BTN-FORM: Hover (Background: # F2F2F2;)
In conclusion, once again see the demo and if desired, for a more detailed analysis, download the sources that I carefully packed into the archive, and laid out on my Yandex.Disk:Modal window when pressing the button
To do this, we only need to add an HTML ONCLICK attribute to the code for the button of the modal window and thereby call a function with a defined name.
