jquery layer怎么彈出指定的html內(nèi)元素？一個(gè)基本都的自動(dòng)彈出層估計(jì)滿足以上需求：1、再點(diǎn)擊按鈕/鏈接觸發(fā)時(shí)彈出對(duì)話框?qū)?，提示框?qū)討?yīng)該是有半透明的遮罩層；2、直接點(diǎn)擊彈出對(duì)話框?qū)拥闹苯雨P(guān)閉

jquery layer怎么彈出指定的html內(nèi)元素？

一個(gè)基本都的自動(dòng)彈出層估計(jì)滿足以上需求：

1、再點(diǎn)擊按鈕/鏈接觸發(fā)時(shí)彈出對(duì)話框?qū)?，提示框?qū)討?yīng)該是有半透明的遮罩層；

2、直接點(diǎn)擊彈出對(duì)話框?qū)拥闹苯雨P(guān)閉按鈕、取消按鈕或則遮罩層會(huì)關(guān)掉刻意隱藏彈出層；

3、可以使用Esc鍵也可以不關(guān)了自動(dòng)彈出層；

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

HTML

1、首先我們?cè)陧?yè)面不宜放置一個(gè)用處能觸發(fā)彈出對(duì)話框?qū)拥逆溄?，也這個(gè)可以是個(gè)按鈕button，注意一點(diǎn)的是我們給它可以設(shè)置一個(gè)data-show-layer屬性，這個(gè)屬性值對(duì)應(yīng)的那是彈出層的id，也就是說(shuō)是從data-show-layer來(lái)關(guān)聯(lián)彈出層。

2、很看來(lái)，上面的鏈接關(guān)聯(lián)的提示框?qū)拥膇d是hw-layer。那好，選擇我們來(lái)準(zhǔn)備著彈出來(lái)層hw-layer的html代碼。

3、我們提示框?qū)拥淖钔鈱?，也就是蒙版?hw-overlay，我們會(huì)可以使用CSS操縱它是一個(gè)半透明的層，為了相連提示框?qū)雍晚?yè)面主體內(nèi)容。r然后把在.hw-layer-wrap主體層內(nèi)，我們可以系統(tǒng)設(shè)置彈出層的內(nèi)容，當(dāng)然內(nèi)容由你來(lái)定，我們本文生克制化實(shí)例彈出來(lái)層的內(nèi)容是另一個(gè)去確認(rèn)對(duì)話框，類似window的confirm()。內(nèi)容使用了bootstrap的col-*柵格布局，還在用glyphicon字體圖標(biāo)。不過(guò)最最關(guān)鍵的那就是需要圖層效果層和主體層，內(nèi)容可以依據(jù)什么項(xiàng)目需求自定義，只不過(guò)它很有可能是個(gè)表單、也很有可能是個(gè)純文字說(shuō)明的內(nèi)容。

CSS

1、CSS也重要的部分，我們先系統(tǒng)設(shè)置遮罩層，它設(shè)置成情況下應(yīng)該是不可見(jiàn)的，位置上defined固定設(shè)置的，另外是完全覆蓋整個(gè)頁(yè)面的，它應(yīng)該透明的的，我們這里設(shè)置里了背景黑色、透明度0.3，如background-color:rgba(0,0,0,0.3)。后再主體層.hw-layer-wrap，我們可以設(shè)置它的寬度，換算它的位置。寬度我們可以預(yù)設(shè)一個(gè)值，水平距離而內(nèi)容多少不確定，這里我們用不著設(shè)置一個(gè)具體看的值，在后面的js部分會(huì)對(duì)高度全面處理，后再設(shè)置中左面和邊框陰影等效果。或是水平和互相垂直橫列的設(shè)置也可以可查閱Helloweba文章：要如何讓DIV水平和垂直橫列。自動(dòng)彈出層里面的內(nèi)容樣式可以放棄自由系統(tǒng)設(shè)置，最后那是不使用mediaquery來(lái)設(shè)置小屏幕下的彈出對(duì)話框?qū)泳幼蟮膯?wèn)題。

2、我們?cè)谟胘Query來(lái)去處理可以觸發(fā)彈出對(duì)話框?qū)雍完P(guān)閉彈出層效果，應(yīng)此需要預(yù)做程序加載jQuery庫(kù)。showLayer(id)是一個(gè)自定義的函數(shù)，單獨(dú)可以展示彈出層。當(dāng)點(diǎn)擊按鈕或鏈接內(nèi)部函數(shù)這個(gè)showLayer(id)函數(shù)，它會(huì)漸現(xiàn)的效果展示，而且換算彈出層的高度小位移距離，使得提示框主體層水平和互相垂直方向的居中。而原函數(shù)hideLayer()那是隱藏地彈出層，slidedown()的或hide()就能基于。到最后再而且不觸發(fā)遮罩層的時(shí)候關(guān)閉自動(dòng)彈出層以及可以使用Esc按鈕的時(shí)候關(guān)掉彈出層的代碼。

3、其實(shí)到這里，一個(gè)都差不多的彈出對(duì)話框?qū)有Ч冉?jīng)要做了。我們這里只是做一個(gè)基本是的彈出層，你也是可以通過(guò)再繼續(xù)儲(chǔ)存代碼。我們看完很多彈出來(lái)層插件，很多全是相冊(cè)就不能操作DOM的，也就是通過(guò)js代碼先queryselectorall，然后再在將內(nèi)容append到body里的，這種要是是過(guò)度能操作DOM的話會(huì)會(huì)消耗當(dāng)然的性能，因此從性能角度確定的話，我?guī)臀彝扑]可以使用本文提供的彈出對(duì)話框?qū)印?/p>