Ways to create popup windows

Introduction

In this lesson, I will not reveal the secret to experienced designers and gurus css, but this article will be useful for beginners. this is where you can learn how to create pop-ups on top of the entire site.

Most often such windows appear after performing certain actions on the site, for example, the user clicks the link “Request a callback” 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 network that use PopUp pop-up windows. An example is the familiar social networks. All unnecessary data from the screenshots removed.
')

In contact with

Facebook

Twitter

I think enough arguments to start exploring the question: how to make PopUp pop-up window on your site.

Problem Statement (TZ)

It is necessary to create a pop-up window over the entire site with a blackout screen.

Decision

Method 1

html

<div class="b-container"> Sample Text </div> <div class="b-popup"> <div class="b-popup-content"> Text in Popup </div> </div> 

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:

Very often suggest to use:

 position:absolute; 

Yes, the result is the same, but due to the fact that we have set the height of the “blackout” block, scroll bars 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)

 <div class="b-container"> Sample Text </div> <div class="b-popup"> <div class="b-popup-content"> Text in Popup </div> </div> 

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

Due to the property: min-height: 100%; Our block "blackout" has gained a width of 100% and a minimum height of 100% of the screen.

The only disadvantage of this method is that Internet Explorer supports this property only from version 8.0.

Adding magic on jQuery

Now add links to hide / display our popup window.

To do this, you need to connect the jQuery library and a small script:

 <script src="http://code.jquery.com/jquery-2.0.2.min.js"></script> <script> $(document).ready(function(){ // PopUp    PopUpHide(); }); //  PopUp function PopUpShow(){ $("#popup1").show(); } //  PopUp function PopUpHide(){ $("#popup1").hide(); } </script> 

Also need to update Html:

 <div class="b-container"> Sample Text <a href="javascript:PopUpShow()">Show popup</a> </div> <div class="b-popup" id="popup1"> <div class="b-popup-content"> Text in Popup <a href="javascript:PopUpHide()">Hide popup</a> </div> </div> 

Result

Now when the page loads, the PopUp popup window will disappear.

If we click on the “Show popup” link, we will have a pop-up window. And if you click on the “Hide popup” link, the pop-up window will disappear again.

The result can be found here: http://jsfiddle.net/p7NbX/15/