11.14日(rì)音(yīn)訊,網頁中制(zhì)作(zuò)×₹浮層疊加效果。設計(jì)模式通(tōng)常是(§'★✔shì)一(yī)組最佳實踐和(hé)技(jì)術(shù)，主要(yào↓ π)目的(de)是(shì)用(yòng)來(lá&©i)解決一(yī)些(xiē)最常見(jiàn)γ' 的(de)設計(jì)“問(wèn)題”，通(tō∑'ng)常是(shì)在上(shàng)下(xià)文(wén>≠φ)中提出的(de)設計(jì)原則。這(zhè)些(xiē)原則之是(sβ₹&hì)一(yī)“停留在頁面”的(de≈≤λ)原則。這(zhè)一(yī)原則是(shì)建立在頁面÷←刷新都(dōu)打破用(yòng)戶的(de)心中想要(yào)的≥ ®≠(de)流程基礎上(shàng)，造成所謂的(de•±≤)“變盲”，我們需要(yào)用(yò£¥φ•ng)戶無論保時(shí)何地(dì)可(kě)以避免打破這(zhè)種∏'σ視(shì)覺流程。
我們可(kě)以在保留用(yòng)戶在網頁和(hé)模型的(₽Ω de)過程中做(zuò)出明(míng)智的(de)選擇。一(yī)個ו®(gè)方式，讓用(yòng)戶在同一(yī)頁面上(shφ≈βàng)試圖讓內(nèi)容在當前頁面的(de)背景£ ∑下(xià)，通(tōng)過展示一(yī)個(gè)“迷φ™你(nǐ)頁面”，或一(yī)個(←←αgè)彈出的(de)對(duì)話(huà)框。這(zhè)個(gè)輕量✔↑σ級的(de)層就(jiù)是(shì)我們所說(shuō)的(de↑"∏δ)一(yī)個(gè)“浮層”。
輕量級的(de)浮層圖可(kě)以用(yòng≤≤≈)來(lái)問(wèn)問(wèn)題，獲得(de'©¶β)輸入，引入特征，包括流程，給予指示，或展示信息。他(tā)們可♣≈∏(kě)以直接由用(yòng)戶激活事(shì)件(jiàn)(如(€σrú)，點擊一(yī)個(gè)動作(zuò)，懸浮事(shì)件(ji ♣♥àn))或由Web應用(yòng)程序在不(bù∏>↕₹)同的(de)階段完成一(yī)個(gè)動作(zuò)。當用(yòn∏×≥g)戶交互隻接受在彈出窗(chuāng)、燈箱廣告效↔™α果的(de)應用(yòng)和(hé)其他(tā)的(de)απ 頁面，顯示會(huì)變得(de)暗(àn) ®★&下(xià)來(lái)。
本教程的(de)目的(de)是(shì)向你(nǐ)介紹向個(gè)方φ 法，使用(yòng)CSS創建黯淡的(de)疊加效果，複習(x↓$í)他(tā)們的(de)技(jì)術(λ♠¶shù)，并确定各自(zì)的(de)優缺點。
技(jì)巧1：絕對(duì)定位的(de)元素
第一(yī)種方法，使用(yòng)頁面上(shàng)的(de)HTM™₹L元素的(de)絕對(duì)定位來(lái)創€✔建浮層疊加效果。在模闆中使用(yòng)一(yī)個(gè)γ"空(kōng)的(de)
div
标記，使用(yòng)CSS的(de)絕對(duì)定位給這(zhè)₹≤≥×個(gè)
div
指定一(yī)個(gè)高(gāo)的(de)
z-index
值，确保這(zhè)個(gè)空(kōng)的(₹≠ de)
div
保持在頁面其他(tā)元素的(de)£ 頂部，除了(le)疊加在這(zhè)個(gè)層上(shàng)面的(d→"πσe)彈出窗(chuāng)口，需要(yào)設置一(yī)個(gè)更高(gā₽π σo)的(de)
z-index
值。
divclass="overlay&qu↑×✘ot;></div>假如(rú)我們給一(yī)'<γ個(gè)空(kōng)的(de)
div
标簽添加一(yī)個(gè)
.overlay
類名，使用(yòng)CSS定位，将這(zhπ÷¶è)個(gè)層疊加在頁面上(shàng)ε×面：
html,body{min-height:100%;}bo←¥ dy{position:relative;}÷£←.overlay{position:absolute;top×π≠:0;left:0;width:100%;height:100β∏€%;z-index:10;backgrou©™¶nd-color:rgba(0,0,0,0.5);/*暗ε&→(àn)淡的(de)背景*/}
代碼很(hěn)簡單，使用(yòng)這(zhè)種技(jì)術(shùσ >¶)有(yǒu)幾件(jiàn)事(shì)需要(yào)注意。
首先，你(nǐ)需要(yào)确保浮層的(de)絕對(duì)定位是≠(shì)相(xiàng)對(duì)于
body
。因此，如(rú)果浮層包含在另一(yī)個(gè)
div
中，而且這(zhè)個(gè)
div
設置了(le)相(xiàng)對(duì)定位，那(nà•™↓)麽疊加定位是(shì)相(xiàng)對(duì)于其容器(qì≤ ©)，而不(bù)是(shì)頁面的(de)
body
。所以，你(nǐ)要(yào)麽讓這(zhè)個(gè)覆蓋♥✔±層是(shì)
body
的(de)子(zǐ)元素，或者确保它的(de•★α)所有(yǒu)祖先元素沒有(yǒu)設置為(w≈ ♦èi)
relative
。
同進，你(nǐ)需要(yào)确保你(n€÷ǐ)的(de)頁面內(nèi)容擴展到(dào)窗(chuāng)口底部或¶φ更多(duō)，因為(wèi)
body
的(de)擴展以适應其內(nèi)容的(de)高(gāo)度(λ∑假設內(nèi)容不(bù)是(shì)絕對 ±(duì))，如(rú)果沒有(yǒu)足夠的(de)內(nèiγ>)容來(lái)擴大(dà)
body
的(de)高(gāo)度到(dào)窗(chuāngΩ¶•≤)口的(de)底部。這(zhè)個(gè)時(shí)候需要(yào)将浮層的★(de)高(gāo)度設置為(wèi)
body
高(gāo)度的(de)100%，不(bù)然達不(bù)到∑$σ(dào)視(shì)窗(chuāng)的(de)底部， •也(yě)無法覆蓋它。
為(wèi)了(le)避免這(zhè)種情況，不(b₹®ù)提心頁面上(shàng)的(de)內(nèi)容數(shù)量，仍$₹↓¶然需要(yào)一(yī)個(gè)和(hé)視(shì)窗(ch♥♦₹♦uāng)大(dà)小(xiǎo)的(de)疊加層，你(nǐ)需要♥∑(yào)設置一(yī)個(gè)相(xiàng)關于
html
和(hé)
body
的(de)高(gāo)度。
如(rú)果你(nǐ)給
html
元素設置了(le)100%高(gāo)度(10€<0%高(gāo)度是(shì)相(xiàng)對(d♥₽uì)于視(shì)窗(chuāng)高(gāo)度)，同時(s"γ§φhí)給
body
設置一(yī)個(gè)100%高(gāo)度α±∑(相(xiàng)對(duì)于
html
元素)，此時(shí)
邯鄲網站(zhàn)建設兩個(gè)元素的(de)高(gāo)度都(dōu→∏¶)是(shì)相(xiàng)對(duì)于視(shì♦♠♥ )窗(chuāng)的(de)100%，視(shì)$γ窗(chuāng)無論有(yǒu)多(dε ←uō)深的(de)內(nèi)容，他(tā)們的(γ♥→βde)高(gāo)度仍然沿著(zhe)內(nèi)容高(gāo¥$₩¥)度延伸，等同于視(shì)窗(chuāng)高(gāo)度，'←所以浮層的(de)高(gāo)度也(yě)一(yī)×±₩γ樣。
在這(zhè)種情況下(xià)，如(rú)果你(nǐ)向下(xià♠ ™♥)滾動頁面，疊加層也(yě)将滾動起來(lái)，你(n¶↓™βǐ)會(huì)看(kàn)到(dào)它下(xià)面↓♥×π的(de)內(nèi)容沒有(yǒu)覆蓋，也(yě)就(jiù)是(shì↑∏φ)說(shuō)覆蓋被切斷。
解決文(wén)案是(shì)給
html
元素和(hé)
body
元素設置一(yī)個(gè)最小(xiǎo)高(gāo)度，在大δ (dà)多(duō)數(shù)情況下(xià)是(shì)✘↔可(kě)取的(de)。通(tōng)過設置一(yī)個(gδ☆€è)最小(xiǎo)高(gāo)度，你(nǐ)會÷$↑γ(huì)确保他(tā)們的(de)高(gāo)度達到(dào)視(&↑×'shì)窗(chuāng)的(de)底部，并随著(zhe)內(✘ nèi)容增加而增加。最後，要(yào)使浮φε Ω層的(de)高(gāo)度增加，讓他(tā)随內(nèi)容滾動覆蓋整個(•λ♥₹gè)頁面內(nèi)容，你(nǐ)必須在
body
上(shàng)設置一(yī)個(gè)
position:relative
，讓浮層的(de)高(gāo)度擴展到(dào)
body
的(de)高(gāo)度。
另一(yī)件(jiàn)事(shì)λ→情要(yào)注意，這(zhè)種技(jì)術(shù)★™δ不(bù)需要(yào)給
z-index
設置一(yī)個(gè)很(hěn)高(gāo)的(de)×₽∑值。當他(tā)們位置重疊，或頁面上(shàng)元素在另一(yī)個(g讣)元素之上(shàng)，很(hěn)多(duō)開(kāi)發人(ré§φεn)員(yuán)傾向于給
z-index
設置一(yī)個(gè)非常高(gā¥o)的(de)值，如(rú)
z-index:999999
。這(zhè)是(shì)沒有(yǒu)必要(yào)的(de)$ ±σ。大(dà)得(de)多(duō)情況之下(xià)δ§α，給
z-index
設置值為(wèi)10,有(yǒu≤π ∏)時(shí)甚至更少(shǎo)，就(jiù$α↓ε)足夠讓一(yī)個(gè)元素在其他(tā)元素之上(shàn¥ ✔g)。你(nǐ)隻需要(yào)知(zhī)道(dào)，φβ如(rú)果其他(tā)元素指定了(le)
z-index
值，你(nǐ)要(yào)将浮層的(≠€de)
z-index
值設置高(gāo)于其他(tā)元素±§₽。
最後，你(nǐ)還(hái)需要(yào)記得(de)，在這(×<δzhè)種技(jì)術(shù)中，你(n×↔÷ǐ)需要(yào)添加一(yī)個(gè)空(kōng)的(de)
div
标記，當然這(zhè)樣是(shì)沒有(yǒu)語義的(de)。
使用(yòng)這(zhè)種技(jì)術(s↔∏✔↑hù)的(de)優勢是(shì)，它支持所有(yǒu)±≈ε主要(yào)的(de)浏覽器(qì)，和(hé)• 其他(tā)老(lǎo)浏覽器(qì)，到(dà $↑o)IE8。
我已經建立了(le)一(yī)個(gè)JSBin£δπ，所以你(nǐ)可(kě)以在這(zhè)裡(₽φlǐ)測試你(nǐ)的(de)結果。嘗試将
html
和(hé)
body
元素
min-height
換成
height
，或删除
body
中的(de)
relative
，看(kàn)看(kàn)當你(nǐ)滾動的(de)時(shí)候浮層如≠↕(rú)何被切斷。
技(jì)巧2：固定定位元素
第二種方法你(nǐ)可(kě)以添加一(yī)個(gè)非常類似于前一(φ∏Ωyī)種方法的(de)覆蓋層，并在結構中使用(yòn÷ ®g)相(xiàng)同的(de)
.overlay
元素，但(dàn)相(xiàng)反的↓'(de)定位浮層是(shì)絕對(duì)定↕"≥位，你(nǐ)給它一(yī)個(gè)固定的(de)位₽₩置和(hé)一(yī)個(gè)完整的(de)寬度和(hé) ✔'高(gāo)度來(lái)覆蓋整個(gè♣&©)視(shì)窗(chuāng)。并且由于本例中的πβ≥(de)浮層是(shì)固定的(de)，無論你(nǐ)怎麽滾動，♣γ浮層是(shì)固定住的(de)，覆蓋了(le)整•個(gè)窗(chuāng)口的(de)區(qū)域。"™這(zhè)也(yě)是(shì)我們想要(yào)的(÷•de)東(dōng)西(xī)。
.overlay{position♦<:fixed;top:0;left:0;heightλ :100%;width:100%;z-index:10;backgrou↓♥nd-color:rgba(0,0,0,0.5);}
不(bù)像絕對(duì)定位的(d¥&γ e)元素，相(xiàng)對(duì)于設置了(le)
position:relative
的(de)容器(qì)，而固定定位¶&≈是(shì)相(xiàng)對(duì)于視(shì)窗(chuāng)：
設置了(le)
position:absolute
的(de)元素的(de)位置和(hé)大(dà)小(xiǎo)是(≥☆π×shì)相(xiàng)對(duì)于包含塊的(de)位置和(hé≈§•)尺寸；設置了(le)
position:fixed
的(de)元素的(de)位置和(h ≥'é)大(dà)小(xiǎo)是(shì)相(x±¥βiàng)對(duì)于最初的(de)包含塊。這(zhè)通(tōng)βσ常是(shì)視(shì)窗(chuān®λ¥<g)：浏覽器(qì)窗(chuāng)口或頁面><的(de)框。——W3CWiki
通(tōng)常，當使用(yòng)固定定≈÷"位，你(nǐ)不(bù)必擔心浮層的(de)
div
在結構中放(fàng)置在哪裡(lǐ)。無論你(nǐ)把它≥π♥放(fàng)在哪裡(lǐ)，都(dōu)會(huì)得(de)到(dà'₹≤ o)一(yī)個(gè)相(xiàng)對(du±♣★≠ì)于視(shì)窗(chuāng)的(de)固定位置，₩•除非你(nǐ)改變浮動的(de)祖先元素，在這(zhè≤¶≈≠)種情況下(xià)，轉換元素包含了(le)為(wèi)所有(yǒu)後代元素☆✔定位的(de)包含塊，即使是(shì)那(nà)↕₩€些(xiē)得(de)到(dào)一(yī)個(gè✔)固定定位的(de)元素。這(zhè)個(gè)事(shì)實坑了(le)很(↑↔hěn)多(duō)開(kāi)發人(rén)員(yuán)，包括我自(z<¶ βì)己。所以，如(rú)果你(nǐ)發現<✔(xiàn)自(zì)己修複一(yī)個(gè)元素和(hé)結果并不(bù)≥&像你(nǐ)所預期的(de)那(nà)樣，你(nǐ)要(yào)£σ✘檢查固定的(de)元素的(de)後代元素是(shì)否已經&δ$被改變。
再次，使用(yòng)這(zhè)種技(jì)術(shù)∑ε，我們添加了(le)一(yī)個(gè)空(kōng)元ε•→$素标記，這(zhè)違背了(le)标記語義化(huà)。那γ÷(nà)麽，我們怎樣才能(néng)避免這(zhè)種情況呢(ne)？
技(jì)巧3：使用(yòng)僞元素
為(wèi)了(le)在我們的(de)标記β•π中避免增加空(kōng)元素，我們可(kě)以使用₩✘•(yòng)僞元素來(lái)創建浮層。
在這(zhè)種技(jì)術(shù)上✔'(shàng)樣式和(hé)注意事(shì)項和(hé)以前基本上(→®shàng)一(yī)樣，我們将在
body
上(shàng)使用(yòng)
:before
或
:after
僞元素上(shàng)寫樣式來(lái)代替給
.overlay
空(kōng)元素。
html,body{min-height:100%;}body{posi'±tion:relative;/*如(rú)果給僞元素設置絕對(λ ←Ωduì)定位，需要(yào)先設置相(xiàng)對(duì)定位*/}α¶body:after{content:"";displ≥←ay:block;position:fixed ε ™;/*也(yě)可(kě)以設置絕對(duì)定位*₹♥/top:0;left:0;height:γ×✘ 100%;width:100%;z-index:10;b®♠→ ackground-color:rgba(®ππ0,0,0,0.2);}
你(nǐ)可(kě)以給僞元素相(xiàng ≤Ω)對(duì)于
body
元素設置絕對(duì)定位，也(yě)Ω♠可(kě)以給他(tā)設置固定定位。不(₽σ©bù)管你(nǐ)選擇什(shén)麽，你(nǐ)不(bù)得(de)不(b£₽ù)考慮我們前面提到(dào)的(de)兩種技(jì)術(>™∏♥shù)。
可(kě)以看(kàn)看(kàn)這(zhè)個(gè)例↓★€子(zǐ)：
有(yǒu)一(yī)點非常重要(y→φào)，僞元素的(de)過渡效果到(dào) §•現(xiàn)在在Safari和(hé)移動端的(de)Safari也(yě)Ω 無法支持，所以這(zhè)是(shì)一(yī)個(gè)巨大(dà)的π•(de)缺點，如(rú)果你(nǐ)要(yào₹←≥)使用(yòng)一(yī)個(gè)僞元素來(lá♠✔i)創建浮層，你(nǐ)要(yào)考慮這(zhèε∑♣→)個(gè)方法不(bù)能(néng)給用(yòng)戶提€ 供光(guāng)滑的(de)動畫(huà)浮層 ®•$效果。
技(jì)巧4：應用(yòng)巨大βε®₽(dà)的(de)outline
這(zhè)種方法不(bù)需要(yào)任何額外(✘¶≈∞wài)的(de)元素來(lái)創建暗(àn)淡的 ♦♥(de)背景浮層效果。相(xiàng)反，你(nǐ)可<≥$(kě)以使用(yòng)一(yī)個(gè)彈出窗(chuāng)口的(d>∞₩e)outline，并将其值設置得(de)很(hěn)大(dà)，來(lái )實現(xiàn)浮層效果。
提出這(zhè)種技(jì)術(shù)的 ®(de)是(shì)LeaVerou，并且她( © tā)是(shì)第一(yī)個(gè)在Twitter上(shànπε★g)分(fēn)享。
假設在模闆中有(yǒu)一(yī)個(gè)元素實現(x§★iàn)彈出窗(chuāng)口，也(yě)将出現(xiàn)一(yī)個(g>₽₩Ωè)浮層：
<divclass="modal'σ∏♠">I'mtheModa'∞♥lWindow!</div>
當彈出窗(chuāng)口在頁面其他(tā)元素之上(shàng)™≤σσ，可(kě)以使用(yòng)一(yī)個(gè)大(dà)的(de)
outline
值，将它作(zuò)為(wèi)浮層的(de)背景層。
outline
通(tōng)常設置一(yī)個(↔•$€gè)非常大(dà)的(de)值，它需要(yào)足夠大(dà)，以确保它的(γσde)大(dà)小(xiǎo)能(néng)覆蓋整 &個(gè)視(shì)窗(chuāng)的(de)大(×∏dà)小(xiǎo)。
.modal{/*彈出窗(chuāng)口定位在頁面中間(jiān←£$ )的(de)樣式*/position:fixed;top:50%;lef ←÷t:50%;width:300px;line-height:200px ♣¶;height:200px;margin-left:-1✘↓✔50px;margin-top:-100px;background-co↑$lor:#f1c40f;text-align:center≈×↕≠;/*浮層需要(yào)的(de)樣式*/z-index:1$> 0;/*保持在其他(tā)元素上(shàng)最上(©≈≠♥shàng)面*/outline:9999p≈←♦xsolidrgba(0,0,0,0.5);}
當然，你(nǐ)不(bù)能(néng)忘了(le)設置
z-index
值，讓彈出窗(chuāng)保持在頁面其他(tā)元素之上(sα≤♠•hàng)。
要(yào)記住的(de)一(yī)件(jiàn)事(shì)γ♣♥ε情，在這(zhè)裡(lǐ)當你(nǐ)使用(yòng)這(zhè)種技(j £✘☆ì)術(shù)實現(xiàn)浮層效果，≥≤₹¶不(bù)能(néng)防止鼠标與其他(tā)頁面元素的(de)交互。當你π§α(nǐ)點擊頁面上(shàng)的(de)其他(tā)元素ε ♠，你(nǐ)不(bù)能(néng)防止指針和(hé)鼠标事(s>₹Ωδhì)件(jiàn)，在大(dà)多(duō)數(shù)情況£∞≤ 下(xià)，這(zhè)可(kě)能(néng ©)是(shì)一(yī)個(gè)不(bù)良的(de₹ $€)效果。所以在你(nǐ)的(de)效果中，你(nǐ)≥↓要(yào)考慮是(shì)否使用(yòng)這(zhè)種技 ₩(jì)術(shù)。
還(hái)請(qǐng)注意，在邊框外(wài)面使¥×$≤用(yòng)了(le)一(yī)個(gè↓)巨大(dà)的(de)
outline
，在此處無法使用(yòng)
border-radius
。在我們的(de)例子(zǐ)中如(rú)果你(n★÷₩ǐ)有(yǒu)一(yī)個(gè)邊界使用(φγyòng)了(le)圓角，你(nǐ)将注意到(dàoα€€)會(huì)有(yǒu)一(yī)個(g∏®è)缺口。如(rú)果你(nǐ)的(de)彈出↔ 窗(chuāng)口要(yào)使用(y☆∏$£òng)一(yī)個(gè)圓角，這(zhè§≈α)可(kě)能(néng)不(bù)是(shì)一(y ↔ī)個(gè)好(hǎo)的(de)選擇。
技(jì)巧5；在彈出窗(chuāng)口應用(yòng)一(yī)®α個(gè)大(dà)的(de)box-shado♥→w
該技(jì)術(shù)與前面示例唯一(yī)的(de)區(q 'ū)别是(shì)，在彈出窗(chuān€< ±g)口沒有(yǒu)使用(yòng)巨大(dπφγà)的(de)
outline
，而是(shì)使用(yòng)了(le♦♥ ✔)一(yī)個(gè)
box-shadow
。
效果是(shì)大(dà)同小(xiǎo)異：
當然，這(zhè)種技(jì)術(shù)♦♦π$也(yě)不(bù)能(néng)阻止與頁面其他(tā™✔÷)元素之間(jiān)的(de)交互。
現(xiàn)在，盡管提及使用(yòng)這(zhè)種技(jì)€★λ術(shù)作(zuò)為(wèi)一(yī)個(gè)創建浮>₹層的(de)方法，但(dàn)我強烈建議(yì)你(n"σ♦→ǐ)不(bù)要(yào)使用(yòng)它來(¥☆€lái)創建浮層。甚至更多(duō)的(de)是(shì)，在你(nǐ™" ±)的(de)頁頁和(hé)應用(yòng)中不(bù±)要(yào)使用(yòng)太多(duō)的(de)陰影(yǐβ©•→ng)效果。
結合其他(tā)樣式，比如(rú)說(shuōε÷)
或者大(dà)量使用(yòng)将會(huì)給性能(♦♠•σnéng)帶來(lái)一(yī)個(gè)巨大(dà)的(de)"λ瓶勁，甚至會(huì)使用(yòng)的(de)應用(yòng)程序無法在智"能(néng)手機(jī)和(hé)平闆電(diα¥àn)腦(nǎo)上(shàng)使用(yòng→®)，因為(wèi)他(tā)們很(hěn)不(bù)想在應用(yòng€β)程序中使用(yòng)
的(de)渲染是(shì)昂貴的(• §de)，在固定元素使用(yòng)大(dà)的(de)陰影(yǐng)變得 '(de)更為(wèi)糟糕，因為(wèi)當頁面滾≠≥動時(shí)會(huì)強迫浏覽器(qì)重繪。π★特别是(shì)在Firefoxk，固定元素和(hé)大(dண¥→)型的(de)CSS陰影(yǐng)會(huì)讓它變得(de)更慢₩∏±(màn)。
所以，在您的(de)應用(yòng)程序中盡量避免使用(yòng)太×&↕多(duō)的(de)大(dà)的(de)
，因為(wèi)它将會(huì)是(shì)一(yī)個(gè)顯著πβ的(de)影(yǐng)響應用(yòng)程渲染。當你(nǐ)發現(xià ×'εn)你(nǐ)要(yào)使用(yòng)大(dà)量的(d★♣ e)盒子(zǐ)陰影(yǐng)的(de)情況下(xià)，你(nǐ)α↑ ∞至少(shǎo)可(kě)以嘗試在智能(néng)手機(jī÷♦λ)和(hé)平闆電(diàn)腦(nǎo)中删除這↓π(zhè)些(xiē)盒子(zǐ)陰影(yǐng)效果，并↕€©且通(tōng)過一(yī)些(xiē)特殊技(jì₽)術(shù)，為(wèi)這(zhè)些(x↔δiē)設備提供後備的(de)樣式。
技(jì)巧6：使用(yòng)
最後一(yī)種技(jì)術(shù)，我們将討(tǎ↑Ωo)論的(de)是(shì)一(yī)個(gè)相(xiàn>€g)當新的(de)技(jì)術(shù)，也(yě)•π是(shì)非常棒的(de)！而且用(yòng)來(lái)創建一(↕♥yī)個(gè)彈出層或對(duì)話(huà)框，這(zhè)種技(j↕ì)術(shù)是(shì)最具語義化(huà)的(de)。
元素可(kě)以在頁面內(nèi)部提供一(yī)個(g™×Ω×è)對(duì)話(huà)框的(de)功能(n₹φéng)。一(yī)個(gè)在Dom中的(de)對(duì)話(huà)δ¶框，可(kě)以使用(yòng)普通(tōng)的(de)CS•λ¥S樣式。
dialog
元素表示一(yī)個(gè)應用(yòng)程序的(de)一(yī)部¥ γ分(fēn)，可(kě)以用(yòng)于用(₩÷•yòng)戶執行(xíng)任務，例如(rú)一(yī)個(g₩≈₩↔è)對(duì)話(huà)框、浮層或彈出窗(chuāng)口。&mda♠ sh;—WHATWGHTMLSpecπ≥₹♦
HTML中的(de)
dialog
元素有(yǒu)四個(gè)主要(yào)特征，而這(zhè)些(x∏×iē)特征中就(jiù)有(yǒu)三個(gè≈≠★)用(yòng)于制(zhì)作(zuò₽₽ )浮層的(de)特性讓我們最感興趣(第四個(gè)特©₩→€征在寫這(zhè)篇文(wén)章(zhāng)時(shí)還(hái)沒有("<yǒu)實現(xiàn))：
默認情u情況下(xià)，當打開(kāi)一₩ λ(yī)個(gè)對(duì)話(huà)框時(shí€ )，他(tā)是(shì)垂直居中的(de)。它仍然是׶∑(shì)絕對(duì)定位的(de)，所以它也(yě☆ε✘)可(kě)以滾動。DOM中的(de)
dialog
定位始終會(huì)是(shì)在視(shì)窗(c←₹λhuāng)的(de)中間(jiān)位置。
dialog
是(shì)一(yī)種模式。當一(yī)個(gè)
dialog
打開(kāi)，它會(huì)鎖定文(wén)檔其他(t™✔®ā)部分(fēn)。
dialog
是(shì)全屏的(de)，并且也(♠♣yě)放(fàng)置在最頂層。
dialog
模式在最頂層。所以你(nǐ)不(bù)需要(yào)擔心需要(yào)δ←δ使用(yòng)
z-index
來(lái)保持彈出層放(fàng)置在頁面其他(tā)元素之←☆₽上(shàng)。
相(xiàng)當不(bù)錯(cuò)，對(duì)嗎(ma)∞¥？默認情況下(xià)，彈出層在頁中處于≤βλ>居中位置，但(dàn)如(rú)前面第一(yī)點所述，它使用(yò ng)絕對(duì)定位，所以它可(kě)以滾動。你(nǐ)可(kě↓σ≤♣)以在你(nǐ)的(de)樣式中覆蓋默認的(de)絕對(du☆<€ì)定位。如(rú)果你(nǐ)決定改變固定的(de)位置¶φ•，你(nǐ)也(yě)可(kě)以通(tōng)過
top
和(hé)
left
值來(lái)改變。
dialog
元素可(kě)以放(fàng)在DOM中的(de)任何★®"地(dì)方：
<dialogclass="mo∞≤dal">Thisisthedialog!</dia☆φλlog>
可(kě)以在樣多(duō)中像其他(tā)塊元素一®®≥&(yī)樣來(lái)設置
元素也(yě)有(yǒu)僞元素叫作(zuò)
::backdrop
，用(yòng)來(lái)設置彈出層後的(de)背景樣式，從(có≥δ ng)而創建浮層效果。我們前面使用(yòng)了(le)五種技(γΩjì)巧，隻有(yǒu)這(zhè)一(yī)次，你(nǐ)可(kě)以使用↔±≠(yòng)默認的(de)元素和(hé)僞元素創建浮層效果。λ♣≤→
所以，使用(yòng)HTML的(de)
dialog
元素創建一(yī)個(gè)浮層效果，你(nǐ)隻需要(yào₽→δ)給
dialog
元素的(de)僞元素設置一(yī)個(gè)背景色，交且定位，讓↑☆他(tā)大(dà)小(xiǎo)等于視(sh✔$¥ì)窗(chuāng)大(dà)小(xiǎo)：
.modal::backdrop{position:↑♦Ω♥fixed;top:0;left:0;right:0;bottom:0→∑∞;background-color:rgba(0♠γ♥,0,0,0.5);}
結果看(kàn)起來(lái)像這(zhè)樣：
現(xiàn)在你(nǐ)使用(yòng&↑φ)了(le)
dialog
元素創建了(le)一(yī)個(gè)浮層。
為(wèi)了(le)使用(yòng)工(gōng)作(zuò)☆↔變得(de)更簡單，
dialog
提供了(le)一(yī)個(gè)AσPI，可(kě)以通(tōng)過
show()
和(hé)
hide()
這(zhè)樣的(de)函數(shù€×)讓對(duì)話(huà)框顯示和(hé)隐藏。
你(nǐ)可(kě)以通(tōng)過EijiKitamura $'的(de)示例可(kě)以了(le)解更多(✘σ♣duō)關于
dialog
元素及其API。當你(nǐ)在浏覽器(qì)<中查看(kàn)它時(shí)，示例運行(xíng)在一(yī)個(✘π∑✘gè)polfill模式中。
結束語
我認為(wèi)我們已經覆蓋了(le)幾乎所有(yǒu)的(de)技←§♣≈(jì)術(shù)，你(nǐ)可(kě)以使用(yòng)≤✘©∑它來(lái)創建一(yī)個(gè)彈出←≥Ω的(de)對(duì)話(huà)框。正如(rΩ♠ú)你(nǐ)可(kě)能(néng)已經猜到(dào)₹←δ了(le)，在最後一(yī)個(gè)技(jì)術(sh∞δ§ù)介紹的(de)是(shì)使用(yòng)
dialog
元素創建一(yī)個(gè)彈出窗(chuāng)，但§≥±(dàn)在撰寫本文(wén)時(shí)，它僅僅隻有(yǒu)Chrome×≠Canary浏覽器(qì)支持，需要(yào)開(kāi®÷ )啓polyfill變量。所以你(nǐ)現(£♣xiàn)在試使用(yòng)，你(nǐ)要(yào)"δ÷考慮你(nǐ)的(de)浏覽器(qì)的(de)兼容≥ 性。但(dàn)是(shì)一(yī)旦所$ε有(yǒu)浏覽器(qì)都(dōu)支持它，它将是(shì)創建彈∑出窗(chuāng)口的(de)最好(hǎo)&₽ 方式，而且還(hái)有(yǒu)很(hěn)多(duō)特性可(kě)以用÷< (yòng)來(lái)處理(lǐ)它。
