基本彈出圖層應滿足以下要求:1.點擊按鈕/鏈接觸發(fā)彈出層，彈出層要有半透明的蒙版層；2.單擊彈出層的關閉按鈕、取消按鈕或掩膜層將關閉隱藏的彈出層；3.您也可以使用Esc鍵關閉彈出圖層；4.它反應靈敏，

基本彈出圖層應滿足以下要求:

1.點擊按鈕/鏈接觸發(fā)彈出層，彈出層要有半透明的蒙版層；

2.單擊彈出層的關閉按鈕、取消按鈕或掩膜層將關閉隱藏的彈出層；

3.您也可以使用Esc鍵關閉彈出圖層；

4.它反應靈敏，兼容現(xiàn)代主流瀏覽器。

超文本標記語言

1.首先，我們在頁面上放置一個鏈接來觸發(fā)彈出層，或者它可以是一個按鈕。注意我們?yōu)樗O置了一個data-show-layer屬性，對應的是彈出層的id，也就是說彈出層是通過data-show-layer關聯(lián)的。

2.顯然，與上述鏈接相關聯(lián)的彈出層的id是hw-layer。嗯，選擇我們準備彈出層hw-layer的html代碼。

3.我們將使用CSS來控制彈出層的最外層，也就是遮罩層。hw-overlay，這是一個半透明層，用于將彈出層與頁面的主要內容分開。r然后，在。hw-layer-wrap主體層，我們可以設置彈出層的內容。當然，內容由你決定。本文彈出的內容層是一個確認對話框，類似于窗口的confirm()。內容使用自舉 s col-*網格布局和字體圖標。其實最重要的是需要一個蒙版層和一個正文層，內容可以根據項目需要定制，因為可能是表格，也可能是純文字描述。

半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)

1.CSS也是很關鍵的一部分。讓 先設置蒙版層。默認情況下，它應該是不可見的，位置固定，并且覆蓋整個頁面。它仍然是半透明的。我們在這里設置背景黑色和透明度0.3，比如background-color:RGBA(0，0，0，0.3)。然后是主層。hw-layer-wrap，我們設置它的寬度并計算它的位置。我們可以預設寬度值。因為高度的內容是不確定的，我們不 這里不需要設置特定的值。我們會在后面的js部分處理高度，然后設置居中和邊框陰影的效果。關于水平和垂直對中的設置，請參考Helloweba 的文章:如何水平和垂直居中DIV。彈出層中的內容樣式可以自由設置，最終解決了使用媒體查詢在小屏幕中央設置彈出層的問題。

2.我們使用jQuery來處理觸發(fā)彈出層和關閉彈出層的效果，所以需要預加載jQuery庫。ShowLayer(id)是一個自定義函數，用于顯示彈出層。當您單擊按鈕或鏈接來調用此showLayer時。(id)函數，會逐漸顯示效果，計算彈出層的高度位移距離，使彈出的主層在水平和垂直方向居中。hideLayer()的作用是隱藏彈出層，可以通過fadeOut()或者hide()來實現(xiàn)。最后，添加觸發(fā)掩膜圖層時關閉彈出圖層的代碼和使用Esc按鈕時關閉彈出圖層的代碼。

3.其實至此，一個基本的彈出層效果已經做好了。我們這里只是做一個基本的彈出層，你也可以繼續(xù)擴展代碼。我們見過很多彈出層插件，很多都是動態(tài)直接操作DOM的，也就是先通過js代碼創(chuàng)建

常用的JS選擇器有getElementById()、getElementsByName()、getElementsByTagName()、getElementsByClassName()、querySelector()。

答:返回對第一個具有指定ID的對象的引用。如果要在文檔中查找特定的元素，最有效的方法是的返回元素的名稱屬性是文檔中的名稱值。因為name屬性值不是唯一的，所以查詢結果可能返回數組而不是元素。

·返回文檔中指定標簽的元素。

·返回文檔中指定類名的所有元素。

·querySelector()返回文檔中匹配指定css選擇器的第一個元素。

·querySelectorAll()返回文檔中匹配指定css選擇器的第一個元素。

第二，jQuery選擇器#

內容

基本的選擇器包括ID選擇器、類選擇器、標簽選擇器和通用選擇器，以及事件的添加。添加方法如下:

$ (...).事件名稱(function() {})

屬性樣式包括:

$(...).CSS(#34邊框#34，# 341像素純紅# 34)

$(...).css({...})

$(...).css(#34border#34)

$(...).attr(屬性名稱，值)

$(...).html() innerHTML

$(...).text()內部文本

$(...).val()值值

$(...).addClass()增加。

$(...).removeClass()刪除

$(...).toggleClass()開關* *

選擇器的詳細用法:#

屬性選擇器的補充:

例如，查找當前類下所有具有data-scrollto屬性的元素。右側導航條。

$(# 39 . right nav-bar[data-scroll to]# 39)

varscroll $(# 39[data-scrollto]# 39)//當只有要查找的元素包含data-scroll to屬性時，也可以使用此方法。

//var tabIndex $(# a[data-types # 39 support # 39]# 34)。索引()