建站
咨詢
售后
建站咨詢
新聞中心
除了有良好的語義外，隨著瀏覽器的不斷更新迭代，還出現(xiàn)了許多你可能不知道的特性，快速了解一下吧~
一、打開和關(guān)閉方法
首先，在不查閱任何官方文檔的情況下，先做一個(gè)選擇題目
請問：下面哪組方法（打開/關(guān)閉）是合法的？
思考 10 秒...
????
????
????
????
正確答案是 C，也就是
// 打開彈窗
dialog.show()
// 打開關(guān)閉
dialog.close()
很多同學(xué)可能會覺得是 A 或者 B，但是官方文檔上確是 C，確實(shí)是一個(gè)令人迷惑的方法。至于原因，有解釋說，dialog是存在于頁面上的元素，所以打開用show，而關(guān)閉表示中斷彈窗內(nèi)的行為，所以用close，只能說有聯(lián)系，但比較牽強(qiáng)，或許就是規(guī)范設(shè)計(jì)疏忽了，大家記住就好。
還有一個(gè)，如果需要彈窗默認(rèn)顯示，大家先猜猜看？
再來思考 10 秒...
????
????
????
????
正確答案是 B，也就是
????是不是又和上面的show()對不上了？
除了dialog元素，details元素的打開屬性也是open
二、表單提交特性
彈窗很多時(shí)候的作用都是充當(dāng)表單輸入。
比如一個(gè)彈窗中需要有一個(gè)關(guān)閉或者取消按鈕
通常情況下，我們可能需要用到前面提到的dialog.close()方法來主動關(guān)閉彈窗。
其實(shí)，還可以通過表單特性實(shí)現(xiàn)這樣一個(gè)效果，具體做法是：
- 在dialog中嵌套一層form
- 給form添加一個(gè)method=dialog屬性
如下
這樣就可以不用綁定額外的事件來實(shí)現(xiàn)關(guān)閉功能了，效果如下
Kapture 2023-01-14 at 12.52.33
其實(shí)原因就在于表單上的method=dialog屬性，如果表單在dialog元素中，提交時(shí)就會觸發(fā)關(guān)閉對話框
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/form#attr-method
默認(rèn)情況下，表單里的button都會觸發(fā)提交，等同于type=submit，但如果設(shè)置了type=button或者type=reset，則不會觸發(fā)表單提交，自然也不會關(guān)閉彈窗
效果如下
另外還有一個(gè)小特性，dialog還有一個(gè)returnValue屬性，可以返回表單中提交按鈕的value值
在提交后可以打印彈窗的returnValue，如下
image-20230114132406007
不過暫時(shí)還沒有想到很有用的場景
三、模態(tài)窗口特性
彈窗除了可以通過dialog.show()打開之外，還提供了一個(gè)模態(tài)窗口，方法是
dailog.showModal()
通過這個(gè)方法打開的彈窗，會自帶一個(gè)半透明的背景，并且完全水平垂直居中
這個(gè)半透明的背景并不是普通的元素，而是一個(gè)叫做::backdrop[1]的偽元素控制的，并且目前只有通過dailog.showModal()這個(gè)方法才能生成
要自定義背景也很容易
dialog::backdrop {
background: rgba(255,0,0,.25);
}
這樣就變成了半透明紅色
如果希望打開彈窗有動畫，可以自定義默認(rèn)樣式，通過visibility的方式實(shí)現(xiàn)隱藏顯示
dialog{
position: fixed;
margin: auto;
inset: 0;
width: fit-content;
height: fit-content;
display: block;
visibility: hidden;
opacity: 0;
transform: translateY(100px);
transition: .2s;
}
dialog[open] {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
效果如下
其實(shí)這里我是不太建議動畫的，彈窗就是要反應(yīng)快速，加了動畫反而會拖累整體。
另外，還可以通過:modal偽類來區(qū)分是普通彈窗還是模態(tài)彈窗
dialog:modal{
/*模態(tài)彈窗*/
}
dialog:not(:modal){
/*普通彈窗*/
}
這樣可以更多進(jìn)行自定義行為
模態(tài)彈窗還有一個(gè)非常省心的點(diǎn)，就是無需關(guān)注層級。它有一套非常直觀的規(guī)則，哪個(gè)后打開，哪個(gè)層級最高，比如這樣兩個(gè)彈窗
在不指定層級的情況下，肯定是后面的層級更高，但如果是通過dialog.showModal打開，就非常直觀了，后打開的彈窗肯定會覆蓋前面的，效果如下
說到這里，我又想到了一些UI組件庫里大到可怕的z-index，大概率就是通過計(jì)算不斷疊加得出的
四、焦點(diǎn)隔離特性
除了上面一些比較直觀的特性外，還有一些可能會忽略的，比如焦點(diǎn)的控制。
默認(rèn)情況下，打開彈窗后會自動聚焦到彈窗內(nèi)的第一個(gè)可聚焦元素上
Kapture 2023-01-14 at 14.34.43
還可以有input輸入框
打開彈窗后可以直接輸入，無需額外操作，簡直不要太方便
注意，注意，注意：經(jīng)測試發(fā)現(xiàn)，如果添加了打開動畫，聚焦特性就會失效
當(dāng)然，這些只是小兒科，一點(diǎn)點(diǎn)額外的 JS 也能解決，下面介紹一個(gè)系統(tǒng)級別的焦點(diǎn)隔離特性。什么意思呢？就是說在打開彈窗后，彈窗就成了一個(gè)獨(dú)立的載體，焦點(diǎn)只能在這個(gè)范圍內(nèi)移動，也就是說，無論tab鍵如何切換，焦點(diǎn)不會跑到彈窗外面去，下面是一個(gè)對比效果
- 普通彈窗效果
- 模態(tài)彈窗效果
這個(gè)效果其實(shí)是和新出的inert屬性作用比較類似的，但是要比inert出現(xiàn)的更早，也可以說是通過inert屬性將這種隔離特性通用化了，讓平民老百姓也可以享受這種高級特性。有興趣的可以訪問我之前的這篇文章：快速了解 inert 屬性
五、頂層特性 top-layer
最后介紹一個(gè)即便是 JS 也無法模擬的系統(tǒng)級新特性，top-layer。
不知道大家有沒有遇到這樣的問題，有些彈窗由于業(yè)務(wù)需要，不得已寫在了某些容器下面，即便是fixed定位，也會有失效的時(shí)候，比如下面這個(gè)例子，父容器如果有transform相關(guān)屬性并且超出隱藏，就會出現(xiàn)這樣被裁剪的情形
上面這個(gè)例子來源于 xy-ui 中的 dialog 組件[2]，后續(xù)優(yōu)化，敬請期待~
在以前，或者說很多框架中，都會想辦法把彈窗放到最外層的 body下，這樣就不受影響了，比如下面是vue3中的處理方式
但現(xiàn)在，有了全新的 top-layer ，一切都好辦了，比如下面是一個(gè)通過dialog.showModal()打開的彈窗
你會發(fā)現(xiàn)，雖然dialog仍然在原來位置上，但真正渲染到了一個(gè)#top-layer的層級上，這個(gè)層級非常特殊，已經(jīng)超越了html文檔流，可以說是獨(dú)一檔的存在，這樣，無論的dialog在什么位置，最后渲染的地方其實(shí)都在#top-layer層級上，自然也不會被父容器裁剪被隱藏了，示意如下
是不是和現(xiàn)代框架有些許類似呢？下面是一個(gè)彈窗里嵌套另外一個(gè)彈窗
效果如下
其實(shí)這也是后打開的彈窗永遠(yuǎn)要高于之前彈窗的原因，#top-layer是動態(tài)創(chuàng)建的，只有打開的彈窗才會渲染到該層級之下。
另外，經(jīng)測試發(fā)現(xiàn)，firefox 以及 safari 雖然在開發(fā)者工具上看不到#top-layer，但是dialog表現(xiàn)基本幾乎一致，應(yīng)該是已經(jīng)成為了標(biāo)準(zhǔn)規(guī)范，日后可以放心使用。
六、dom 其實(shí)也是在不斷發(fā)展的
dialog其實(shí)我在兩三年之前就有研究過，那時(shí)還沒有這么多新特性，也有可能是研究不精，后來就擱置了，然后最近在項(xiàng)目中用了dialog，無意中又發(fā)現(xiàn)了很多有意思的新特性，這意味著，dom 其實(shí)也是在不斷發(fā)展的，有必要把以前已經(jīng)用過的再翻出來過一遍，說不定還能發(fā)現(xiàn)意想不到的結(jié)果，下面是要點(diǎn)總結(jié)
- dialog? 的打開和關(guān)閉方法很迷惑，分別是show() / close()
- dialog?中表單元素在添加method=dialog屬性之后，只要觸發(fā)表單提交就會自動關(guān)閉彈窗，無需額外 js
- 通過showModal()可以打開模態(tài)彈窗，并且后打開的彈窗永遠(yuǎn)比先打開的彈窗層級要高，無需手動計(jì)算層級
- 打開彈窗會自動聚焦到彈窗內(nèi)的第一個(gè)可聚焦元素，方便快速輸入
- 模態(tài)彈窗的焦點(diǎn)不會聚焦到彈窗外部，這和inert特性比較類似
- 模態(tài)彈窗其實(shí)是渲染到了html文檔流之外，一個(gè)叫#top-layer的層級上，因此不會受到原父容器的影響
當(dāng)前題目：你可能不知道的Dialog彈窗
文章鏈接：http://www.dlmjj.cn/article/dhighcp.html
