HTML5.2新標籤 —— dialog
前言
繼HTML5新增了諸多新的標籤之後，HTML5.2又引入了幾個現代標籤，其中就包括<dialog>標籤。 下面跟大家一塊學習一下這個標籤。
舉個例子
下來看一個最簡單的例子↓：
以上就是dialog的原生態樣式，未新增任何額外樣式。這在Chrome和Firefox裡表現是一致的，它們各自的預設樣式是這樣的，基本一致——
Chrome： 
Firefox: 
嫌醜？！如果給它加上瘦臉（去掉預設樣式），加上美顏（css），再加上特效（js），一樣可以十分性感。
兩個屬性
open
該屬性意味著該對話方塊是可見的，沒有它，這個對話方塊就會隱藏起來，直到你使用JavaScript來顯示它，其實就是給它加上了open屬性。
returnValue
用來獲取close時傳入的引數，看下面。
三個方法
show()
showModal()
兩個方法相同點都是開啟彈窗，即都會給dialog元素新增一個open屬性。 不同點：
唯一區別就是show()會按照其在DOM流中的位置顯示dialog，沒有遮罩，而showModal()會出現遮罩， 並且自動做了按鍵監控，即點選esc鍵，彈窗會關閉
大多數情況下，我們會使用便利的showModal()方法來而不使用show()方法。
close()
會關閉彈窗，即會刪除open屬性，並且可以攜帶一個引數作為額外資料，傳入的值可以通過dialog.returnValue獲取。
兩個事件
close
當modal關閉的時候觸發
cancel
當按下ESC關閉模態框的時候觸發
在各事件的事件物件event.target裡，同樣可以看到close()方法傳入的引數，即event.target。returnValue。
一個偽元素
::backdrop
是dialog偽元素，用來設定彈窗遮罩的樣式，用法如下
dialog::backdrop {
background-color: rgba(0, 0, 0, 0.4);
}
- 瀏覽器對backdrop也有預設的樣式。 chrome：
-
再舉個例子
部分程式碼
methods: {
onShow () {
this.dialog.showModal();
}
},
mounted () {
this.dialog = this.$refs.dialog2;
let closeBtn = this.dialog.querySelector(`.js-close`);
let confirmBtn = this.dialog.querySelector(`.js-confirm`);
let cancelBtn = this.dialog.querySelector(`.js-cancel`);
//按esc關閉彈窗，同時會觸發close事件
this.dialog.addEventListener(`cancel`, e => {
//不寫這句也會關閉，這裡主要是為了攜帶資料及演示監聽cancel事件
this.dialog.close(`按esc關閉`);
});
//關閉
this.dialog.addEventListener(`close`, e => {
let returnValue = this.dialog.returnValue;
this.dialog.returnValue = ``;
returnValue !== `` && this.$notify({
title: `returnValue`,
message: returnValue
});
});
//點選遮罩關閉，事件註冊在dialog上
this.dialog.addEventListener(`click`, (event) => {
if (event.target === this.dialog) {
//關閉，並攜帶資料
this.dialog.close(`點選了遮罩關閉`);
}
});
//點×關閉
closeBtn.addEventListener(`click`, e => {
this.dialog.close(`點選了關閉`);
});
//點確定
confirmBtn.addEventListener(`click`, e => {
this.dialog.close(`點選了確定`);
});
//點取消
cancelBtn.addEventListener(`click`, e => {
this.dialog.close(`點選了取消`);
});
}
/*改變dialog樣式*/
dialog {
position: fixed;
margin: 0;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
min-width: 300px;
max-width: 80%;
border: none;
box-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
}
dialog[open] {
animation: slide-up 0.4s ease-out;
}
/*改變遮罩樣式*/
dialog::backdrop {
background: rgba(0, 0, 0, 0.5);
}
@keyframes slide-up {
0% {
opacity: 0;
transform: translate(-50%, -40%);
}
100% {
opacity: 1;
transform: translate(-50%, -50%);
}
}polyfill
What？！瀏覽器不支援？手機端沒反應？！！
木有關係。這裡有一個dialog-polyfill， 通過少許的額外程式碼，依然可以實現實現上面的功能。 只要引入該js，js中在彈窗物件後面新增一句：
dialogPolyfill.registerDialog(this.dialog);
再引入它的css(很簡單)即可。有興趣的同學可以試試，這裡不再贅述~ 不支援的瀏覽器再試下這個Demo↓：