3. An example of a jQuery modal called by link (with Demo)
Most likely you have already seen a pop-up modal window on the Internet - registration confirmation, warning, help information, file download and much more. In this tutorial, I will offer some examples of how to create the simplest modal windows.
Create a simple modal popup
Let's start considering the code of the simplest modal window, which will immediately appearjquery code
Paste the code anywhere in body your page. Immediately after loading the page, without any commands, you will see a window like this:
But the following code will be executed after loading the entire page in the browser. In our example, after loading the page with images, a simple pop-up window will pop up:
Calling a jQuery modal from a link with CSS
The next step is to create modal window when clicking on the link. The background will slowly darken.
You can often see that the login and registration forms are located in such windows. Let's get down to business
To start, let's write html part. We place this code in the body of your document.
Calling a modal window
CSS code. Either in a separate css file or in
In the jQuery code, we will focus on the position of the modal and the mask, in our case, the gradual darkening of the background.
Attention! Don't forget to include the library in the head of the document!
Connecting the library from the Google site. Well, the jQuery code itself.
jQuery Code
Nowadays, for various sites, all kinds of pop-up modal windows - popups - for registration, authorization, information windows - of various shapes and sizes have become the norm. There are also a huge number of plugins in addition to jQuery for the simple and convenient creation of such popups - the Shadowbox for example.
The appearance, size and design of such pop-ups are completely diverse - with an overlay, shadows, animations - you can't count everything. The only thing that unites them, perhaps, is the fact that they are usually displayed in the very center of the page - both horizontally and vertically. And this centering is done by means of JS. I will not go into the details of these calculations, I will describe them only briefly:
The popup HTML code usually has the following structure:
And css( here and below, I will deliberately omit the writing of some properties that are necessary only for some browsers and their versions, leaving only the most basic):
Popup_overlay(
position : fixed ;
left: 0
top : 0 ;
background : #000
opacity: .5
filter : alpha(opacity=50 );
z-index : 999
}
.popup(
position : absolute ;
width : 20%
z-index : 1000 ;
border : 1px solid #ccc ;
background : #fff
}
JS determines the browser and browser version, and based on this it calculates the dimensions of the workspace and the dimensions of the popup itself (if they are not set), and then simple calculations are made of the position of its upper left corner (css properties left and top for .popup). Many plugins also react to page resizing, recalculating the whole thing each time, so that the popup is positioned exactly in the center of the workspace.
I am a perfectionist by nature (I know sometimes it's bad), and often bother even with small details, trying to improve and add the maximum possible extensibility to these details, and I could not help but be hooked on this particular moment in the work of all these plugins. The idea arose that all the work of popup positioning can be shifted from the shoulders of JS to the shoulders of the browser itself, that is, this work can be done using CSS.
This is what we'll do.
Below I will give an example of a popup that works in all major versions of major browsers. For it to work correctly in IE<9 необходима некоторая экстра-разметка и хаки, потому детальное описание написания такого метода я опущу, а для интересующихся выложу полную версию.
So, we have a page with a button, when clicked, a modal window with some information should pop up, and all other content should be shaded by an overlay.
First, the HTML code. Its structure will be slightly different from the code indicated above, why - more on that later in the article; element classes will remain the same:
<
div
class
="popup__overlay">
<
div
class
="popup">
And some CSS:
Popup_overlay(
position : fixed ;
left: 0
top : 0 ;
width : 100%
height : 100%
z-index : 999
}
.popup(
}
fixed dimensions
The easiest option. Nothing new needs to be invented.Popup (
left : 50%
top : 50% ;
width : 400px
height : 200px ;
margin-left : -200px ;
margin-top : -100px
}
Negative margins of half the width and height are banal and boring, there is nothing original in this. Let's move on.
Popup sizes depend on the content
First - horizontal alignment - it seems to be easier. If the popup has a fixed width, then the following will suffice:Popup (
margin : auto
}
This will not affect the vertical alignment in any way, and, by the way, if only horizontal alignment is enough for you, then you can stop there by specifying some other top indent of the popup. But this is not enough for us! Go ahead.
Vertical alignment. This is where it gets interesting. Of course, a table or table emulation with display: table & display: table-cell would have coped with such a task without any problems, but making this work in old IE is more expensive. The table also disappears - for obvious reasons.
So, the margin is already gone - we don't know the sizes. Let's remember what are the properties with similar effects. Yep, text-align. But only for inline elements. OK. It seems that God himself ordered to use display: inline-block - a block element to which you could apply properties for inline elements. With the support of this property, all browsers also have everything, one might say, in order. The code becomes something like this:
Popup_overlay(
position : fixed ;
left: 0
top : 0 ;
width : 100%
height : 100%
z-index : 999 ;
text-align : center
}
.popup(
display : inline -block ;
vertical-align : middle
}
What remains is vertical alignment - vertical-align is fine for us. In any other situation it would also be appropriate to use line-height, but since we don't have a fixed page height (line-height in this context), we can't use it here. One trick that comes to the rescue is the vertical alignment of elements of unknown sizes. I remember exactly that I found this method on Habré, but, unfortunately, I could not find a link to that topic. This method consists in the following: an inline-block element of zero width and 100% height of the parent is added, which "expands" the line height to 100% of the parent's height, that is, to the height of the page workspace. Let's make it more elegant - instead of extra markup, we will use pseudo-elements:
Popup_overlay :after (
display : inline -block ;
width : 0
height : 100%
vertical-align : middle ;
content : ""
}
It remains to add a translucent dimming of the overlay - rgba will handle this. Everything! Now the position of the popup is regulated only by browser tools at the CSS level.
In this lesson, I will not reveal the secret to seasoned layout designers and css gurus, but this article will be useful for beginners. this is where you can learn how to create popups on top of the entire site.Most often, such windows appear after performing certain actions on the site, for example, the user clicks on the “Order a callback” link and an order form pops up in front of him.
It is very convenient to use PopUp windows in conjunction with ajax, but this is a topic for another lesson.
More and more web resources are starting to appear on the web that use PopUp pop-ups. An example is the well-known social networks. All unnecessary data from the screenshots has been removed.
In contact with
I think there are enough reasons to start exploring the question: how to make a PopUp pop-up window on your site.
Problem statement (TOR)
It is necessary to create a pop-up window with screen dimming over the entire site.Solution
Method 1
html
css
*( font-family: Areal; ) .b-container( width:200px; height:150px; background-color: #ccc; margin:0px auto; padding:10px; font-size:30px; color: #fff; ) .b-popup( width:100%; height: 2000px; background-color: rgba(0,0,0,0.5); overflow:hidden; position:fixed; top:0px; ) .b-popup .b-popup -content( margin:40px auto 0px auto; width:100px; height: 40px; padding:10px; background-color: #c5c5c5; border-radius:5px; box-shadow: 0px 0px 10px #000; )Result:
It is often suggested to use:
Position:absolute;
Yes, the result is similar, but due to the fact that we have set the height of the "fade" block, scrollbars appear. That is why this method is not suitable.
Method 2
This method is not fundamentally different from Method 1, but I find it more convenient.html (no change)
css
*( font-family: Areal; ) .b-container( width:200px; height:150px; background-color: #ccc; margin:0px auto; padding:10px; font-size:30px; color: #fff; ) .b-popup( width:100%; min-height:100%; background-color: rgba(0,0,0,0.5); overflow:hidden; position:fixed; top:0px; ) .b-popup . b-popup-content( margin:40px auto 0px auto; width:100px; height: 40px; padding:10px; background-color: #c5c5c5; border-radius:5px; box-shadow: 0px 0px 10px #000; )The result is similar
Thanks to the property: min-height:100%; our 'fading' block is set to 100% width and minimum height at 100% screen.The only disadvantage of this method is that Internet Explorer only supports this property from version 8.0.
Adding magic to jquery
Now let's add links to hide/show our popup.To do this, you need to include the jQuery library and a small script:
You also need to update the Html:
Result
The PopUp will now hide when the page loads.The result can be viewed here.
A simple modal window in terms of functions, which is completely made in pure CSS, where you can put it under different functions to call on the site. This is probably one of the many that I have come across from a selection of modal windows, in terms of its ease of setup, but also installation. But the main thing is its functionality, which will not be inferior to others. Also, by default it is made under a light shade, where a button is installed in the upper right corner, in the form of a cross.Which will go to the disable function or just to make the frame disappear, where even on this small element there is an effect of changing the color palette. Now the web master can put it on the site and place a description or operators in it, which can display different categories, like statistics or an informer.
But the fact is, if you have a dark style of the resource, then in the style you can quickly change the gamma, or rather, fit it to the original design. Here's one of the standard methods for putting pure CSS on a modal that will fire when you click on a button below a link with an HTML anchor. The button itself goes more for visibility, where in the styles, removing one class and the name will remain, which can be put both in the navigation or in the control panel, where the main functionality or site navigation is located.
This is when checking that everything works fine:
Let's start the installation:
Window with button
ZorNet.Ru - webmaster's portal×
This is where the content for the site will be located.
css
Butksaton-satokavate (
display: inline-block
text-decoration: none;
margin-right: 7px;
border-radius: 5px
padding: 7px 9px;
background: #199a36;
color: #fbf7f7 !important;
}
Anelumen (
display:flex;
position: fixed;
left: 0;
top: -100%;
width: 100%
height: 100%;
align-items: center;
justify-content: center;
opacity: 0
-webkit-transition: top 0s .7s, opacity .7s 0s;
transition: top 0s .7s, opacity .7s 0s;
}
Anelumen:target (
top: 0;
opacity: 1
-webkit-transition: none;
transition: none;
}
anelumen figure (
width: 100%
max-width: 530px
position: relative;
padding: 1.8em
opacity: 0
background color: white
-webkit-transition: opacity .7s;
transition: opacity .7s;
}
Anelumen.lowingnuska figure (
background: #f9f5f5;
border-radius: 7px
padding-top: 8px;
border: 3px solid #aaabad;
}
Anelumen.lowingnuska figure h2 (
margin-top: 0;
padding-bottom: 3px
border-bottom: 1px solid #dcd7d7;
}
Anelumen:target figure (
opacity: 1
}
anelumen.lowingnuska .compatibg-ukastywise (
text-decoration: none;
position: absolute;
right: 8px;
top: 0px;
font-size: 41px;
}
Anelumen .nedismiseg (
left: 0;
top: 0;
width: 100%
height: 100%;
position: fixed;
background-color: rgba(10, 10, 10, 0.87);
content: "";
cursor: default;
visibility: hidden;
-webkit-transition: all .7s;
transition: all .7s;
}
Anelumen:target .nedismiseg (
visibility: visible;
}
You also need to be aware that CSS styling and pseudo-classing is one of those not fully exploited features of CSS with many interesting potential applications.
It fires when the page's URL matches its element's ID, or you can put it another way, it's when the user jumps to a specific element on the page.
Hello everyone, I'll tell you about one very convenient thing called a modal window, we'll figure out how to make a modal window? Many do not understand what it is, I will try to explain it in a language you understand, in other words, it is a pop-up window when you click on a button or text.
Inside this window, there can be any information (video, picture, code, etc.) I have now begun to use the modal window more, as there is some material that needs to be let's say that it is not displayed on the page, but let's say there was a picture, when you click on it, a window pops up with information.
I recently did this on one site, I inserted a picture on the main page, not even a picture, but a screenshot from a YouTube video, and when you click it, a window pops up where the video is shown. An example of such a window can be seen on my page with the game, the principle is the same, you click on the picture, a window with the game pops up. I did this because the game extension is wider than my content column, so I found such a way out of the situation.
Consider a modal window on css, so as not to fool our heads, we will use styles, that is, it prescribes styles in the main file and code in our window, we will consider everything in detail, what and how.
Modal window in css, how to make a modal window
The first thing we need is styles, copy the complete code with styles below and paste it into your main style file, that is, in style.css
| 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- transition: opacity 400ms ease- in; transition: opacity 400ms ease- in; display: none; pointer-events: none; ) . Window: target ( display: block; pointer-events: auto; ) . Window > 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: #cc3300; 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: #990000; ) |
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-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; display: none; pointer-events: none; ) .Window:target ( display : block; pointer-events: auto; ) .Window > 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: #cc3300; 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: #990000; )
We save, you can play with the styles, and make something more beautiful, change the background, make another frame, and so on. Go to the page where you want this window to pop up, and paste the following code:
| 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" >XHere is the content of the window |
Button
Now let's analyze a little what is in it, you need to change it. Where is it written "Button" there you can insert, like a picture and text, whatever you want, that is, when you click on it, a window will open. Where it is written "The contents of the window will be here" paste what you would like to see in the pop-up window, that's basically all.
NEWS!
Well, last but not least, the news, as always, I’ve been doing something with the news already)) I made myself a small page with an affiliate program, in the form of, I ask everyone to go to it and see if someone can give some more interesting advice, for example, to add something, well, you know what I'm talking about. There are still some thoughts on it, to add a video with me, maybe an instruction, well, something like that, in general, I'm waiting for your comment!
