Bootstrap Modal mask popup layer (full version)

Imitating Bootstrap, Bootstrap modal adds fixed to the outer layer, and then uses adaptive top-centering method for the content. The article I’m sharing today does exactly that.

html structure

Considering that the content area needs to be centered, there must be at least one div to position and display the background, and then use a div to center the content. 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="#">×</a>
<div class="rs-dialog-header">
<h3>标题</h3>
</div>
<div class="rs-dialog-body">
<p>内容</p>
</div>
<div class="rs-dialog-footer">
<input type="button" class="close" value="Close" style="float:right">
</div>
</div>
</div>

Add style

Transparent background is achieved with background and opacity. You can also choose rgba, but browsers IE8 and below do not support it. In order to make a div with fixed position cover the entire window, you can set its top, right, left, and bottom attributes to 0.

When the content area is too long, simulate the browser's vertical scroll bar by setting the overflow attribute of the body (or HTML) to hidden, disabling the browser's real scroll bar from appearing, and then setting the outermost div of the pop-up window. overflow-y:auto, uses the scroll bar of this div to simulate the browser scroll bar.

The scrolling effect when the pop-up window is opened and closed is implemented using css3 transition.

.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: 1040;
-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;
right: -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 #e5e5e5;
}
.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;
}
}

Add control script

Most of them are implemented with css, so the script can control the switch through simple addClass and removeClass.

You can also add the function of clicking outside the pop-up window to close the window.

jQuery(document).ready(function($){
$(&#39;body&#39;).append(&#39;<div class="rs-overlay" />&#39;);
$("a[rel=&#39;rs-dialog&#39;]").each(function(){
var trigger = $(this);
var rs_dialog = $(&#39;#&#39; + trigger.data(&#39;target&#39;));
var rs_box = rs_dialog.find(&#39;.rs-dialog-box&#39;);
var rs_close = rs_dialog.find(&#39;.close&#39;);
var rs_overlay = $(&#39;.rs-overlay&#39;);
if( !rs_dialog.length ) return true;
// Open dialog
trigger.click(function(){
//Get the scrollbar width and avoid content being pushed
var w1 = $(window).width();
$(&#39;html&#39;).addClass(&#39;dialog-open&#39;);
var w2 = $(window).width();
c = w2-w1 + parseFloat($(&#39;body&#39;).css(&#39;padding-right&#39;));
if( c > 0 ) $(&#39;body&#39;).css(&#39;padding-right&#39;, c + &#39;px&#39; );
rs_overlay.fadeIn(&#39;fast&#39;);
rs_dialog.show( &#39;fast&#39;, function(){
rs_dialog.addClass(&#39;in&#39;);
});
return false;
});
// Close dialog when clicking on the close button
rs_close.click(function(e){
rs_dialog.removeClass(&#39;in&#39;).delay(150).queue(function(){
rs_dialog.hide().dequeue();
rs_overlay.fadeOut(&#39;slow&#39;);
$(&#39;html&#39;).removeClass(&#39;dialog-open&#39;);
$(&#39;body&#39;).css(&#39;padding-right&#39;, &#39;&#39;);
});
return false;
});
// Close dialog when clicking outside the dialog
rs_dialog.click(function(e){
rs_close.trigger(&#39;click&#39;);
});
rs_box.click(function(e){
e.stopPropagation();
});
});
});

Prevent webpage content from shifting

Add the overflow:hidden attribute to the body when opening a pop-up window, causing the scroll bar to disappear. At this time, the content of the web page will move to the right. When the pop-up window opens and the scroll bar appears again, it will Will recover, the visual effect is not friendly. If you know the width of the scroll bar when there is one, adding the padding-right attribute to the body can offset this cheap effect.

Trigger the pop-up window

Finally, according to the above script, the link that triggers the pop-up window is as follows

<a href="#" rel="rs-dialog" data-target="myModal">Launch Demo Modal</a>

rel="rs-dialog" means that this is the link that triggers the pop-up window

data-target="myModal" means that you want to open HTML Pop-up window with ID myModal.

For more articles related to Bootstrap Modal mask pop-up layer (full version), please pay attention to the PHP Chinese website!