Html5+css3+jquery Pop-up Layer Instance tutorial

The pop-up layer is used to present detailed information to the user and is highly interactive. The pop-up layer has dialog boxes, modal windows, and so on, I call them the pop-up layer, and so do my colleagues. Generally we like to use the more mature pop-up layer plug-ins such as FancyBox, but in this article, I will first discard plug-ins, to show you how to use Html5+css3+jquery implementation of the pop-up layer.

We completely use Html5+css3+jquery to implement a basic pop-up effect, so we can modify the pop-up layer appearance style and even the JS method call in the example. The pop-up layer effect we end up with should be responsive, that is, a pop-up layer that can be well displayed on both the desktop PC and the mobile side, and is compatible with modern browsers. In the demo, I used the bootstrap style, of course, you can also write a style to complete the page layout.
A basic pop-up layer should meet the following requirements:

1, click the button/chain contact hair pop-up layer, the pop-up layer should have a translucent mask layer;
2, click on the pop-up layer of the Close button, Cancel button or mask layer will close the hidden pop-up layer;
3, use the ESC key can also close the pop-up layer;
4, it is responsive, and compatible with modern mainstream browsers.

Html

First we place a link to trigger the pop-up layer on the page, or it can be a button, note that we give it a Data-show-layer attribute, which corresponds to the ID of the pop-up layer, which means that the pop-up layer is associated with the Data-show-layer.
<a class= "btn btn-info btn-lg show-layer" data-show-layer= "Hw-layer" role= "button" > click the pop-up Layer </a>
Obviously, the ID of the pop-up layer associated with the above link is hw-layer. Well, choose us to prepare the HTML code for the pop-up layer hw-layer.
<div class= "Hw-overlay" id= "Hw-layer" >
<div class= "Hw-layer-wrap" >
<span class= "Glyphicon glyphicon-remove hwlayer-close" ></span>
<div class= "Row" >
<div class= "col-md-3 col-sm-12 Hw-icon" >
<i class= "Glyphicon glyphicon-info-sign" ></i>
</div>
<div class= "Col-md-9 col-sm-12" >
<p> This is a html+css+javascript implementation of the pop-up layer effect, it is responsive, it can work in all modern browsers (including the PC and mobile side). </p>

<button class= "btn btn-success hwlayer-ok" > OK </button>
<button class= "btn btn-warning hwlayer-cancel" > Cancel </button>
</div>
</div>
</div>
</div>

The outermost layer of our pop-up layers, the mask layer. Hw-overlay, we'll use CSS to control it as a translucent layer that separates the pop-up layer from the page body content. R then in the. Hw-layer-wrap body layer, we can set the content of the pop-up layer, of course, the content by you, we combine the content of the instance pop-up layer is a confirmation dialog box, similar to Window confirm (). The content uses the bootstrap col-* grid layout and the Glyphicon font icon. In fact, the most important thing is to mask the layer and the body layer, the content can be customized according to the requirements of the project, because it may be a form, or can be a plain text description of the content.

Css

CSS is also the key part, we first set the mask layer, it should be invisible by default, position fixed, and is covered the entire page, it is translucent, we have set the background black, transparency 0.3, such as Background-color:rgba ( 0,0,0,0.3). And then the body layer. Hw-layer-wrap, we set its width and calculate its position. Width We can preset a value, height due to the content of how many uncertain, here we do not have to set a specific value, in the next JS section will be highly processed, and then set the center and shadow and other effects of the border. For horizontal and vertical centering settings, see the Helloweba article: How to center a div horizontally and vertically. The content style inside the pop-up layer can be set freely, and finally, media query is used to set the pop-up layer in the small screen to center the problem.

. hw-overlay{display:none position:fixed; top:0;left:0;width:100%;height:100%; Background-color:rgba (0,0,0,0.3); Z-index:10;}
. hw-layer-wrap{box-sizing:border-box width:570px; position:absolute;left:50%;top:50%; margin-left:-285px; border-radius:3px; Background-color: #fff; box-shadow:1px 2px 4px 0 rgba (0,0,0,0.12); padding:45px 50px;}
Hwlayer-close{position:absolute; right:20px; top:20px; width:20px; height:20px; cursor:pointer; font-size:20px; Color: #ccc;}
. Hw-layer-wrap. Hw-icon{color: #b4d8f3; font-size:86px;text-align:center;}
. hw-layer-wrap h4{margin:5px 0 30px; font-size:24px; color: #383c3e;}
. hw-layer-wrap p{margin:30px 0; line-height:22px; color: #595d60; text-align:left;}

@media (max-width:768px) {
. hw-layer-wrap{width:350px margin-left:-175px; margin-top:-200px; padding:45px 50px; text-align:center;
}
@media (max-width:400px) {
. hw-layer-wrap{width:250px margin-left:-125px;padding:25px 30px;
}

Javascript

We use jquery to handle triggering the pop-up layer and to turn off the pop-up layer effect, so we need to preload the jquery library. Showlayer (ID) is a custom function that shows the pop-up layer. When the click of the button or link calls the Showlayer (ID) function, it will show the effect of the display, and calculate the height of the ejection layer distance, so that the pop-up body layer horizontal and vertical orientation of the center. and the function Hidelayer () is to hide the pop-up layer, fadeout () or hide () can be implemented. Finally, the code that closes the pop-up layer when the mask layer is triggered and the ESC button is used to close the pop-up layer.

$ (function () {
Display Layer
function Showlayer (ID) {
var layer = $ (' # ' +id),
Layerwrap = Layer.find ('. Hw-layer-wrap ');
Layer.fadein ();
Center screen
Layerwrap.css ({
' Margin-top ':-layerwrap.outerheight ()/2
});
}

Hidden layer
function Hidelayer () {
$ ('. Hw-overlay '). fadeout ();
}

$ ('. Hwlayer-ok,.hwlayer-cancel,.hwlayer-close '). On (' click ', function () {
Hidelayer ();
});

Triggering the pop-up layer
$ ('. Show-layer '). On (' click ', function () {
var Layerid = $ (this). Data (' Show-layer ');
Showlayer (Layerid);
});

Click or touch the translucent mask layer outside the pop-up layer to close the pop-up layer
$ ('. Hw-overlay '). On (' click ', Function (event) {
if (Event.target = = this) {
Hidelayer ();
}
});

Press ESC to close the pop-up layer
$ (document). KeyUp (function (event) {
if (Event.keycode = = 27) {
Hidelayer ();
}
});
});

Actually here, a basic pop-up layer effect has been done. We're just doing a basic pop-up layer here, and you can continue to extend the code. We have seen a lot of pop-up layer plug-ins, many are dynamic direct operation of the DOM, that is, through the JS code First createelement, and then in the content append to the body, this way if it is frequent operation of the DOM will consume a certain performance, so from the performance point of view, I recommend using the pop-up layer method provided in this article.
OK, next we will encapsulate the code of the pop-up layer into a simple jquery plug-in, call in the form of Plug-ins to meet the needs of different pop-up layer effect, please pay attention to.