Bootstrap Modal mask pop-up layer (full version) _javascript tips

Previously published an article called Bootstrap modal window code, in fact, that is just a pop-up layer code, it is not a fake Bootstrap, Bootstrap modal is to add fixed to the outer layer, and then the content of the use of adaptive centering. This is the way that this article is shared today.

HTML structure

Consider that the content area needs to be centered, so at least have a div to locate and display the background, and then center the content with a div, and the content area wants to be divided into header, body, and footer.

<div class= "Rs-dialog" id= "MyModal1" >
<div class= "Rs-dialog-box" >
<a class= "Close" href= "#" >x</a>
<div class= "Rs-dialog-header" >
 
 

Add Style

Transparent backgrounds are implemented with background and opacity, or you can choose Rgba, just IE8 and the following browsers do not support it. To make a position-fixed div fill the entire window, you can set its top, right, left, and bottom properties to all 0.

When the content area is too long, simulate the browser portrait scroll bar by setting the overflow property of the body (or HTML) to hidden, preventing the browser from appearing with a true scroll bar, and then setting the Overflow-y:auto for the outermost div of the window. Use this div's scroll bar to simulate the browser scroll bar.

The rolling effect is realized with CSS3 transition when the window is turned on and closed.

. dialog-open{Overflow-y:hidden!important; rs-overlay{background: #000; opacity:.5; Filter:alpha (OPACITY=50);
position:fixed;
z-index:1000;
top:0;
bottom:0;
left:0;
right:0;
Display:none; }. rs-dialog{display:none; opacity:0; overflow:hidden; position:fixed; top:0; bottom:0; left:0; right:0; z-index:104
0;
-webkit-overflow-scrolling:touch;
outline:0;
/*background:rgba (0,0,0,.5); * *-webkit-transition:opacity 15s linear;
-o-transition:opacity 15s linear;
Transition:opacity 15s linear;
}. Dialog-open. rs-dialog{overflow-x:hidden; overflow-y:auto; rs-dialog.in{opacity:1;}. Rs-dialog. rs-dialog-box { -webkit-transform:translate (0, -25%);-ms-transform:translate (0, -25%);-o-transform:translate (0, -25%); Transform:
Translate (0, -25%);-webkit-transition:-webkit-transform 0.3s ease-out;-o-transition:-o-transform 0.3s ease-out;
Transition:transform 0.3s ease-out; }. rs-dialog.in. Rs-dialog-box {-webkit-transform:translate (0, 0);-ms-transform:translate (0, 0);
-o-transform:translate (0, 0);
Transform:translate (0, 0); Rs-dialog. rs-dialog-box{position:relative; margin:30px auto; width:600px; Background-color: #ffffff; Border-radius
: 10px;
border:1px solid #999999;
border:1px solid Rgba (0, 0, 0, 0.2);
-webkit-box-shadow:0 3px 9px rgba (0, 0, 0, 0.5);
box-shadow:0 3px 9px rgba (0, 0, 0, 0.5); }. logged-in. rs-dialog rs-dialog-box{margin-top:60px; rs-dialog-box a.close{position:absolute; top: -12px;
-12px;
width:25px;
height:25px;
padding:0;
line-height:25px;
font-size:20px;
Font-family:arial,sans-serif;
Font-weight:bold;
Text-decoration:none;
Text-align:center;
text-shadow:0 1px 0 #ffffff;
Color: #fff;
Background-color: #8b8b8b;
border:2px solid #fff;
border-radius:25px; box-shadow:0
0 3px 1px #999;
Outline:none; }. Rs-dialog-box a.close:hover{background-color: #444; rs-dialog-header{padding:20px; border-bottom:1px Solid #e5e5
e5; }. Rs-dialog-header h3{font-size:18px; rs-dialog-body{padding:20px; line-height:1.4}. rs-dialog-body p{margin-bottom:10px; rs-dialog-footer{padding:20px; border-top:1px solid #e5e5e5;
Overflow:hidden; } @media (max-width:767px) {. Rs-dialog. rs-dialog-box {width:auto; margin:30px 20px;}}

Adding control scripts

Most of them are implemented in CSS, so the script can control the switch with simple addclass and removeclass.

You can also increase the ability to close Windows by clicking the pop-up window.

JQuery (document). Ready (function ($) {$ (' body '). Append (' <div class= ' rs-overlay '/> '); $ ("A[rel= ' Rs-dialog ']"). each (function () {var trigger = $ (this); var Rs_dialog = $ (' # ' + trigger.data (' target ')); var rs_box = Rs_dialog.find ('. rs-
Dialog-box ');
var rs_close = Rs_dialog.find ('. Close ');
var Rs_overlay = $ ('. Rs-overlay ');
if (!rs_dialog.length) return true; Open dialog Trigger.click (function () {//get the scrollbar width and avoid content being pushed var w1 = $ (window). width
();
$ (' HTML '). addclass (' Dialog-open ');
var w2 = $ (window). width ();
c = w2-w1 + parsefloat (' body '). CSS (' padding-right ');
if (C > 0) $ (' body '). CSS (' padding-right ', C + ' px ');
Rs_overlay.fadein (' fast ');
Rs_dialog.show (' Fast ', function () {Rs_dialog.addclass (' in ');});
return false;
}); Close dialog as clicking on the Close button Rs_close.click (function (e) {rs_dialog.removeclass (' in '). Delay (150). Queue (function () {rs_dialog.hide (). Dequeue (); Rs_overlay.fadeout (' slow '); $ (' html '). Removeclass (' Dialog-oPen ');
$ (' body '). CSS (' padding-right ', ');
});
return false;
});
Close dialog when clicking outside the dialog rs_dialog.click (function (e) {rs_close.trigger (' click ');});
Rs_box.click (function (e) {e.stoppropagation ();});
}); });

Prevent page content from being offset

Open the window to the body to increase the Overflow:hidden property, resulting in the scroll bar disappears, this will make the content of the page to the right to move, the window to open the scroll to appear again, will be restored, the visual effect is not friendly. If you know its width with a scroll bar, adding the Padding-right attribute to the body can counteract this cheap effect.

Trigger window

Finally, according to the script above, the link to the trigger window is as follows

<a href= "#" rel= "Rs-dialog" data-target= "Mymodal" >launch Demo modal</a>

Rel= "Rs-dialog" means this is a window trigger link.

Data-target= "Mymodal" indicates that you want to open a window with an HTML ID of Mymodal.