天天看點
傳回

教你使用HTML5原生對話框元素，輕松建立模态框元件

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">
                    &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是

上面對話框中的屬性。将該屬性添加到元素将強制顯示對話框，否則将删除它。該對話框也将絕對定位在頁面上。

教你使用HTML5原生對話框元素，輕松建立模态框元件

上圖展示了一個最基本的模态框樣式。

打開浏覽器可以檢視到它的基本樣式是這樣的：

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);
}

複制

 上面的樣式效果如下圖：

教你使用HTML5原生對話框元素，輕松建立模态框元件

 三、對話框操作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。

教你使用HTML5原生對話框元素，輕松建立模态框元件

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

上一篇: 分分鐘學會CSS Grid布局
下一篇: 三大步完成A-Tour-of-Go安裝