HTML 5.2草案加入了新的dialog元素。但是是一種實驗技術。
以前，如果我們想要構建任何形式的模式對話框或對話框，我們需要有一個背景，一個關閉按鈕，將事件綁定在對話框中的方式安排我們的標記，找到一種將消息傳遞出去的方式對話......這真的很復雜。對話框元素解決了上述所有問題。
Bootstrap 模態框和原生模態框的對比
下面是一個bootstrap模態框的html結構：
<!-- 按鈕觸發模態框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
開始演示模態框
</button>
<!-- 模態框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
模態框（Modal）標題
</h4>
</div>
<div class="modal-body">
在這里添加一些文本
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">關閉
</button>
<button type="button" class="btn btn-primary">
提交更改
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
下面是一個原生模態框的HTML結構：
<!-- 按鈕觸發模態框 -->
<button type="button" class="btn">顯示模態框</button>
<!-- 模態框 -->
<dialog open>
HTML5原生模態框
</dialog>
基礎的模態框樣式
我們已經看到了對話框元素的最簡單標記，您可能已經注意到open是上面對話框中的屬性。將該屬性添加到元素將強制顯示對話框，否則將刪除它。該對話框也將絕對定位在頁面上。
上圖展示了一個最基本的模態框樣式。
打開瀏覽器可以查看到它的基本樣式是這樣的：
dialog {
display: block;
position: absolute;
left: 0px;
right: 0px;
width: -webkit-fit-content;
height: -webkit-fit-content;
color: black;
margin: auto;
border-width: initial;
border-style: solid;
border-color: initial;
border-image: initial;
padding: 1em;
background: white;
}
dialog元素還引入了一個新的偽類選擇器::backdrop，通過瀏覽器查看到默認的::backdrop樣式如下：
dialog::backdrop {
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background: rgba(0, 0, 0, 0.1);
}
設置對話框樣式
我們可以像任何HTML元素一樣設置dialog元素的樣式，幾乎所有的CSS樣式都可以。通過::backdrop偽類選擇器，我們可以用它來設置背景的樣式。
例如：
dialog{
margin-top:200px;
width:250px;
height:250px;
text-align:center;
line-height:250px;
border-radius: 4px;
border: none;
box-shadow: 0 0 15px lightgray;
}
dialog::backdrop {
background: rgba(black, .5);
}
上面的樣式效果如下圖：
對話框操作 API
下面是一個基本的對話框，因為沒有設置open屬性，所以它不會在視覺上顯示任何東西。您需要使用JavaScript API來顯示/隱藏它:
<dialog>這是dialog對話框！</ dialog>
dialog元素的.show()和.close()兩個api分別是顯示和關閉對話框，通過在DOM元素上使用這兩個api，您可以顯示和關閉對話框。
例如：
<!-- HTML -->
<dialog>
<p>這是dialog對話框！</p>
<button id="close">關閉對話框</button>
</dialog>
<button id="show">顯示對話框</button>
<!-- script -->
<script>
var dialog = document.querySelector("dialog");
document.querySelector("#show").onclick = function(){
dialog.show();
};
document.querySelector("#close").onclick = function(){
dialog.close();
};
</script>
你可以傳遞一個參數給dialog.close()。通過監聽dialog元素的close事件，該dialog.returnValue屬性將返回給定的值。
如：
<!--HTML-->
<dialog>
<p>這是dialog對話框！</p>
<p><input type="text" id="return_value" value="" placeholder="請輸入內容"/></p>
<button id="close">關閉對話框</button>
</dialog>
<button id="show">顯示對話框</button>
<!--script-->
<script>
var dialog = document.querySelector("dialog");
document.querySelector("#show").onclick = function(){
dialog.showModal();
};
document.querySelector("#close").onclick = function(){
var val = document.querySelector("#return_value").value;
dialog.close(val);
};
//監聽dialog元素的close事件
dialog.addEventListener("close", function(){
alert(this.returnValue);
});
</script>
顯示dialog對話框的另一個api是.showModal()
如果你不希望用戶與對話框以外的其他頁面元素對象進行交互，那么請使用.showModal()打開對話框而不是使用.show()。用.showModal()打開的對話框會有一個全窗口的半透明背景層，阻斷用戶與對話框之外的頁面元素對象進行交互，同時對話框會默認顯示在窗口正中間（上下左右都居中）；而用.show()打開的對話框會默認顯示在窗口頂部（可以通過css實現居中顯示）。
關閉對話框后，close會觸發一個事件。另外，用戶可以通過輸入“Escape”鍵來關閉模式對話框。這將激發cancel您可以取消使用的事件event.preventDefault()。
與表單集成使用
您可以使用form[method="dialog"]將表單與一個<dialog>元素集成使用。表單提交后，它會關閉對話框并設置dialog.returnValue到value已使用的提交按鈕。
此外，您可以使用該autofocus屬性在彈出對話框時自動將焦點對準對話框內的窗體控件。
例如：
<!--HTML-->
<dialog id ="dialog">
<form method ="dialog">
<p>你是否同意使用條款？</p>
<p><textarea class ="form-control" disabled>條款要求...</textarea></p>
<button type ="submit" value ="是">是</button>
<button type ="submit" value ="否" autofocus>否</button>
</form>
</dialog>
<button id="show">顯示表單對話框</button>
<!--script-->
<script>
var dialog = document.querySelector("dialog");
document.querySelector("#show").onclick = function(){
dialog.showModal();
};
//監聽dialog元素的close事件
dialog.addEventListener("close", function(e){
if(this.returnValue === "是"){
alert(this.returnValue)
//dosomething...
}else{
alert(this.returnValue)
//dosomething...
};
});
</script>
瀏覽器兼容性
桌面瀏覽器只有谷歌瀏覽器支持dialog的完整功能（到本博文發表時），要實現跨瀏覽器兼容請使用dialog-polyfill。
<iframe src="//caniuse.com/dialog/embed" scrolling="no" allowtransparency="true" allowfullscreen="true" frameborder="0"></iframe>
參考文獻
參考文章：對話框元素演示
符本人開源項目
usuallyjs函數庫：https://github.com/JofunLiang/usuallyjs
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
