Bootstrap Modal遮罩彈出層(完整版)
之前發(fā)表過(guò)一篇文章叫Bootstrap Modal彈窗代碼，其實(shí)那個(gè)只是一個(gè)彈出層代碼而已，并不是仿造Bootstrap的，Bootstrap modal是給外層添加固定fixed，然后內(nèi)容使用自適應(yīng)靠上居中方式。今天分享的這篇文章正是這種方式。
html結(jié)構(gòu)
考慮到內(nèi)容區(qū)域需要居中對(duì)齊，所以至少要有一個(gè)div來(lái)定位和顯示背景，再用一個(gè)div居中內(nèi)容，內(nèi)容區(qū)域想分成header、body和footer。
<div class="rs-dialog" id="myModal1"> <div class="rs-dialog-box"> <a class="close" href="#">×</a> <div class="rs-dialog-header"> <h3>標(biāo)題</h3> </div> <div class="rs-dialog-body"> <p>內(nèi)容</p> </div> <div class="rs-dialog-footer"> <input type="button" class="close" value="Close" style="float:right"> </div> </div> </div>
添加樣式
透明背景用background和opacity來(lái)實(shí)現(xiàn)，也可以選擇rgba，只是IE8及以下瀏覽器不支持。為了讓一個(gè)position為fixed的div鋪滿整個(gè)窗口，可以將其top、right、left、bottom屬性全部設(shè)為0。
當(dāng)內(nèi)容區(qū)域過(guò)長(zhǎng)時(shí)，模擬瀏覽器縱向滾動(dòng)條，方法是將body（或HTML）的overflow屬性設(shè)為hidden，禁止瀏覽器真正的滾動(dòng)條出現(xiàn)，然后給彈窗最外層的div設(shè)置overflow-y:auto，用這個(gè)div的滾動(dòng)條模擬瀏覽器滾動(dòng)條。
彈窗打開(kāi)關(guān)閉時(shí)滾動(dòng)效果用css3 transition來(lái)實(shí)現(xiàn)。
.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;
}
}
添加控制腳本
大部分用css實(shí)現(xiàn)，所以腳本通過(guò)簡(jiǎn)單的addClass和removeClass就可以控制開(kāi)關(guān)。
還可以增加點(diǎn)擊彈窗外部關(guān)閉窗口的功能。
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 when 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();
});
});
});
防止網(wǎng)頁(yè)內(nèi)容偏移
打開(kāi)彈窗時(shí)給body增加overflow:hidden屬性，導(dǎo)致滾動(dòng)條消失，這時(shí)會(huì)使網(wǎng)頁(yè)的內(nèi)容往右移動(dòng)一下，待彈窗打開(kāi)滾動(dòng)條再出現(xiàn)時(shí)，又會(huì)復(fù)原，視覺(jué)效果不友好。如果在有滾動(dòng)條的情況下知道其寬度，給body增加padding-right屬性就可以抵消這個(gè)便宜效果。
觸發(fā)彈窗
最后，根據(jù)上面的腳本，觸發(fā)彈窗的鏈接如下
<a href="#" rel="rs-dialog" data-target="myModal">Launch Demo Modal</a>
rel="rs-dialog"表示這是彈窗觸發(fā)鏈接
data-target="myModal"表示要打開(kāi)HTML ID為myModal的彈窗。
相關(guān)文章
JS正則表達(dá)式常見(jiàn)用法實(shí)例詳解
這篇文章主要介紹了JS正則表達(dá)式常見(jiàn)用法,結(jié)合實(shí)例形式分析了javascript元字符、分組符、修飾符、量詞基本含義,并結(jié)合具體案例形式分析了javascript正則基本使用技巧,需要的朋友可以參考下2018-06-06
JavaScript作用域與作用域鏈?zhǔn)褂弥攸c(diǎn)講解
當(dāng)代碼在一個(gè)環(huán)境中執(zhí)行時(shí),會(huì)創(chuàng)建變量對(duì)象的一個(gè)作用域鏈,作用域鏈的用途是保證對(duì)執(zhí)行環(huán)境有權(quán)訪問(wèn)的所有變量和函數(shù)的有序訪問(wèn),下面這篇文章主要給大家介紹了關(guān)于JavaScript作用域與作用域鏈的相關(guān)資料,需要的朋友可以參考下2022-10-10
來(lái)自國(guó)外的頁(yè)面JavaScript文件優(yōu)化
外部JavaScript文件塊下載和傷害你的頁(yè)面的性能，但有一個(gè)簡(jiǎn)單的方法來(lái)解決此問(wèn)題：并行使用動(dòng)態(tài)腳本標(biāo)記和加載腳本，提高頁(yè)面加載速度和用戶體驗(yàn)。2010-12-12
JavaScript中l(wèi)ayer關(guān)閉指定彈出窗口方法總結(jié)
這篇文章主要給大家介紹了關(guān)于JavaScript中l(wèi)ayer關(guān)閉指定彈出窗口方法的相關(guān)資料,layer是layui的一個(gè)彈出層組件,但是可以作為獨(dú)立組件使用,需要的朋友可以參考下2023-10-10
js實(shí)現(xiàn)簡(jiǎn)單的二級(jí)聯(lián)動(dòng)效果
本文主要介紹了js實(shí)現(xiàn)簡(jiǎn)單的二級(jí)聯(lián)動(dòng)效果的實(shí)例，具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
Ethers.js則是一個(gè)輕量級(jí)的web3.js替代品，在本文中，我們將學(xué)習(xí)使用ethers.js部署Solidity智能合約的方法，感興趣的朋友一起看看吧2021-10-10
表現(xiàn)、結(jié)構(gòu)、行為分離的選項(xiàng)卡效果
2008-01-01
JS小球拋物線軌跡運(yùn)動(dòng)的兩種實(shí)現(xiàn)方法詳解
這篇文章主要介紹了JS小球拋物線軌跡運(yùn)動(dòng)的兩種實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了javascript實(shí)現(xiàn)小球拋物線運(yùn)動(dòng)的相關(guān)計(jì)算與圖形繪制操作技巧,需要的朋友可以參考下2017-12-12
詳解TypeScript中的箭頭函數(shù)如何實(shí)現(xiàn)重載
這篇文章主要為大家詳細(xì)介紹了TypeScript中的箭頭函數(shù)是如何實(shí)現(xiàn)重載的，文中的示例代碼講解詳細(xì)，具有一定的參考價(jià)值，需要的可以參考一下2023-05-05
這篇文章主要介紹了JavaScript地理位置信息API的相關(guān)資料,需要的朋友可以參考下2016-06-06