, with some content inside and a "Close" button, formed entirely by means of css.

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. You are left by analogy, in div container pop-up window, put 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 arrange 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 omitted the basic styles of the page so as not to confuse, and for greater clarity, I diluted some rules with comments:

/* Base styles for the fade layer and modal */ .overlay ( top: 0; right: 0; bottom: 0; left: 0; z-index: 1; visibility: hidden; /* fade 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; /* round the corners of inline images */ -webkit-border-radius: 4px; -moz- border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; ) /* embedded 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; ) /*** Styling the modal ***/ .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, window stable on scroll */ position: fixed; padding: 15px; border: 1px solid #383838 ; /* round 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 window transparency, appear on click */ opacity: 0; /* transition effect (appearance) */ -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; ) /* activate window popup and background dimming */ .overlay:target+.popup ( top: 20%; /* window position from top of page when popup */ 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); /* rotate 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 hash. If you do everything right, you will get in your arsenal, a wonderful modal pop-up window in which you can place any content, whether it be text content, photos, various registration forms and feedback, or video from any third-party source. Experiment with the parameters, modify the window as you like, and, if possible, share your best practices, as well as problems that have suddenly arisen, in the comments.

Nowadays, for various sites, all sorts 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 besides jQuery for simple and convenient creation such pop-ups - the same 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:

-- Popup with content -->

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 calculates sizes based on this working area and the dimensions of the popup itself (if they are not set), and then simple calculations of the position of its upper left corner are made (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, it should pop up modal window with some information, and all other content should be shaded by the 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 upper indent of the popup. But this is not enough for us! Move on.

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. As an example, we can cite all the familiar social media. All unnecessary data from the screenshots has been removed.

In contact with

Facebook

Twitter

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.

Decision

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 negative this method is that Internet Explorer only supports this property since 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.

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

Facebook

Twitter

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.

Decision

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 under different functions to call 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. It is also by default made under a light shade, where in the right upper corner the button is set, 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 is one of standard methods how to do pure css on a modal window that will be launched when clicking on the button below the link with HTML binding. 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

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;
}

It's also worth knowing that CSS styling and pseudo-classing is one of those not fully exploited features of CSS with many interesting potential applications.

It starts when URL address of the page matches the identifier of its element, or you can say it differently, this is when the user jumps to a specific element on the page.