成人精品一区二区三区中文字幕-成人精品一区二区三区-成人精品一级毛片-成人精品亚洲-日本在线视频一区二区-日本在线视频免费

彈出層用來(lái)向用戶(hù)展示詳細(xì)的信息，交互性非常強(qiáng)。彈出層有對(duì)話(huà)框、模態(tài)窗口等形式，這里我都把他們叫做彈出層，我的同事們也是這么叫的。一般我們喜歡使用比較成熟的彈出層插件如fancybox等，但在本文，我將先拋棄插件，給大家介紹如何使用jQuery+CSS3+Html5實(shí)現(xiàn)彈出層。

效果展示 源碼下載

我們完全使用HTML5+CSS3+jQuery來(lái)實(shí)現(xiàn)一個(gè)基本的彈出層效果，因此我們可以在示例中任意修改彈出層外觀樣式、甚至js方法調(diào)用。我們最終做出來(lái)的彈出層效果應(yīng)該是響應(yīng)式的，也就是說(shuō)可以在桌面PC端和移動(dòng)端都可以很好展示的彈出層，并且是兼容現(xiàn)代瀏覽器的。在demo中，我使用了Bootstrap樣式，當(dāng)然你也可以自己寫(xiě)個(gè)樣式來(lái)完成頁(yè)面布局。

一個(gè)基本的彈出層應(yīng)該滿(mǎn)足以下需求：

1、點(diǎn)擊按鈕/鏈接觸發(fā)彈出層，彈出層應(yīng)該有半透明的遮罩層；

2、點(diǎn)擊彈出層的關(guān)閉按鈕、取消按鈕或者遮罩層會(huì)關(guān)閉隱藏彈出層；

3、使用Esc鍵也可以關(guān)閉彈出層；

4、它是響應(yīng)式的，并且兼容現(xiàn)代主流瀏覽器。

HTML

首先我們?cè)陧?yè)面放置一個(gè)用來(lái)觸發(fā)彈出層的鏈接，也可以是個(gè)按鈕button，注意的是我們給它設(shè)置一個(gè)data-show-layer屬性，這個(gè)屬性值對(duì)應(yīng)的就是彈出層的id，也就是說(shuō)通過(guò)data-show-layer來(lái)關(guān)聯(lián)彈出層。

<a class="btn btn-info btn-lg show-layer" data-show-layer="hw-layer" role="button">點(diǎn)擊彈出層</a> 

很顯然，上面的鏈接關(guān)聯(lián)的彈出層的id是hw-layer。那好，選擇我們來(lái)準(zhǔn)備彈出層hw-layer的html代碼。

<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"> 
<h4>你確定嗎？</h4> 
<p>這是HTML+CSS+Javascript實(shí)現(xiàn)的一個(gè)彈出層效果，它是響應(yīng)式的，它可以在所有現(xiàn)代瀏覽器上工作（包括PC和移動(dòng)端）。</p> 
<button class="btn btn-success hwLayer-ok">確 定</button> 
<button class="btn btn-warning hwLayer-cancel">取 消</button> 
</div> 
</div> 
</div> 
</div> 

我們彈出層的最外層，也就是遮罩層.hw-overlay，我們會(huì)使用CSS控制它是一個(gè)半透明的層，用來(lái)隔開(kāi)彈出層和頁(yè)面主體內(nèi)容。r然后在.hw-layer-wrap主體層內(nèi)，我們可以設(shè)置彈出層的內(nèi)容，當(dāng)然內(nèi)容由你來(lái)定，我們本文結(jié)合實(shí)例彈出層的內(nèi)容是一個(gè)確認(rèn)對(duì)話(huà)框，類(lèi)似window的confirm()。內(nèi)容使用了bootstrap的col-*柵格布局，還用了glyphicon字體圖標(biāo)。其實(shí)最關(guān)鍵的就是需要遮罩層和主體層，內(nèi)容可以根據(jù)項(xiàng)目需求自定義，因?yàn)樗赡苁莻€(gè)表單、也可能是個(gè)純文字說(shuō)明的內(nèi)容。

CSS

CSS也是關(guān)鍵的部分，我們先設(shè)置遮罩層，它默認(rèn)情況下應(yīng)該是不可見(jiàn)的，位置上fixed固定的，并且是覆蓋整個(gè)頁(yè)面的，它還是半透明的，我們這里設(shè)置了背景黑色、透明度0.3，如background-color: rgba(0,0,0,0.3)。然后主體層.hw-layer-wrap，我們?cè)O(shè)置它的寬度，計(jì)算它的位置。寬度我們可以預(yù)設(shè)一個(gè)值，高度由于內(nèi)容多少不確定，這里我們不用設(shè)置一個(gè)具體的值，在后面的js部分會(huì)對(duì)高度處理，然后設(shè)置居中以及邊框陰影等效果。有關(guān)水平和垂直居中的設(shè)置可以參閱Helloweba文章：如何讓DIV水平和垂直居中。彈出層里面的內(nèi)容樣式可以自由設(shè)置，最后就是使用media query來(lái)設(shè)置小屏幕下的彈出層居中的問(wèn)題。

.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

我們使用jQuery來(lái)處理觸發(fā)彈出層和關(guān)閉彈出層效果，應(yīng)此需要預(yù)先加載jQuery庫(kù)。showLayer(id)是一個(gè)自定義的函數(shù)，用來(lái)展示彈出層。當(dāng)點(diǎn)擊按鈕或鏈接調(diào)用這個(gè)showLayer(id)函數(shù)，它會(huì)漸現(xiàn)的效果展示，并且計(jì)算彈出層的高度位移距離，使得彈出主體層水平和垂直方向的居中。而函數(shù)hideLayer()就是隱藏彈出層，fadeOut()或者h(yuǎn)ide()就能實(shí)現(xiàn)。最后再加上觸發(fā)遮罩層的時(shí)候關(guān)閉彈出層以及使用Esc按鈕的時(shí)候關(guān)閉彈出層的代碼。

$(function(){ 
//展示層 
function showLayer(id){ 
var layer = $('#'+id), 
layerwrap = layer.find('.hw-layer-wrap'); 
layer.fadeIn(); 
//屏幕居中 
layerwrap.css({ 
'margin-top': -layerwrap.outerHeight()/2 
}); 
} 
//隱藏層 
function hideLayer(){ 
$('.hw-overlay').fadeOut(); 
} 
$('.hwLayer-ok,.hwLayer-cancel,.hwLayer-close').on('click', function() { 
hideLayer(); 
}); 
//觸發(fā)彈出層 
$('.show-layer').on('click', function() { 
var layerid = $(this).data('show-layer'); 
showLayer(layerid); 
}); 
//點(diǎn)擊或者觸控彈出層外的半透明遮罩層，關(guān)閉彈出層 
$('.hw-overlay').on('click', function(event) { 
if (event.target == this){ 
hideLayer(); 
} 
}); 
//按ESC鍵關(guān)閉彈出層 
$(document).keyup(function(event) { 
if (event.keyCode == 27) { 
hideLayer(); 
} 
}); 
}); 

其實(shí)到這里，一個(gè)基本的彈出層效果已經(jīng)做好了。我們這里只是做一個(gè)基本的彈出層，你也可以進(jìn)行繼續(xù)擴(kuò)展代碼。我們看過(guò)很多彈出層插件，很多都是動(dòng)態(tài)直接操作DOM的，也就是通過(guò)js代碼先createElement，然后在將內(nèi)容append到body里的，這種方式如果是頻繁操作DOM的話(huà)會(huì)消耗一定的性能，所以從性能角度考慮的話(huà)，我推薦使用本文提供的彈出層方式。

好了，接下來(lái)我們將彈出層的代碼封裝成一個(gè)簡(jiǎn)單的jQuery插件，以插件的形式來(lái)調(diào)用，滿(mǎn)足各種不同彈出層效果的需求，敬請(qǐng)關(guān)注。