使用HTML5原生對話方塊元素並輕鬆建立模態方塊元件

HTML 5.2草稿加入了新的dialog元素。但是是一種實驗技術。

以前，如果我們想要建立任何形式的模式對話框或對話框，我們需要有一個背景，一個關閉按鈕，將事件綁定在對話框中的方式安排我們的標記，找到一種將訊息傳遞出去的方式對話......這真的很複雜。對話框元素解決了上述所有問題。

下面是一個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> &times ; </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 light:gray; :backdrop { background: rgba(black, .5);}

上面的樣式效果如下圖：

下面是一個基本的對話框，因為沒有設定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; dialogue). .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>

桌面瀏覽器只有Google瀏覽器支援dialog的完整功能（到本篇文章發表時），要實現跨瀏覽器相容請使用dialog-polyfill。

<iframe src=//caniuse.com/dialog/embed scrolling=no allowtransparency=true allowfullscreen=true frameborder=0></iframe>

參考文章：對話框元素演示

usuallyjs函數庫：https://github.com/JofunLiang/usuallyjs

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。