怎么使用HTML5原生對話框元素并輕松創(chuàng)建模態(tài)框組件

這篇文章主要介紹了怎么使用HTML5原生對話框元素并輕松創(chuàng)建模態(tài)框組件，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

HTML 5.2草案加入了新的dialog元素。但是是一種實(shí)驗(yàn)技術(shù)。

以前，如果我們想要構(gòu)建任何形式的模式對話框或?qū)υ捒?，我們需要有一個背景，一個關(guān)閉按鈕，將事件綁定在對話框中的方式安排我們的標(biāo)記，找到一種將消息傳遞出去的方式對話......這真的很復(fù)雜。對話框元素解決了上述所有問題。

Bootstrap 模態(tài)框和原生模態(tài)框的對比

下面是一個bootstrap模態(tài)框的html結(jié)構(gòu)：

<!-- 按鈕觸發(fā)模態(tài)框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    開始演示模態(tài)框
</button>
<!-- 模態(tài)框（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>
        <h5 class="modal-title" id="myModalLabel">
          模態(tài)框（Modal）標(biāo)題
        </h5>
      </div>
      <div class="modal-body">
        在這里添加一些文本
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉
        </button>
        <button type="button" class="btn btn-primary">
            提交更改
        </button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal -->
</div>

下面是一個原生模態(tài)框的HTML結(jié)構(gòu)：

<!-- 按鈕觸發(fā)模態(tài)框 -->
<button type="button" class="btn">顯示模態(tài)框</button>

<!-- 模態(tài)框 -->
<dialog open>
  HTML5原生模態(tài)框
</dialog>

基礎(chǔ)的模態(tài)框樣式

我們已經(jīng)看到了對話框元素的最簡單標(biāo)記，您可能已經(jīng)注意到open是上面對話框中的屬性。將該屬性添加到元素將強(qiáng)制顯示對話框，否則將刪除它。該對話框也將絕對定位在頁面上。

上圖展示了一個最基本的模態(tài)框樣式。

打開瀏覽器可以查看到它的基本樣式是這樣的：

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，通過瀏覽器查看到默認(rèn)的::backdrop樣式如下：

dialog::backdrop {
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background: rgba(0, 0, 0, 0.1);
}

設(shè)置對話框樣式

我們可以像任何HTML元素一樣設(shè)置dialog元素的樣式，幾乎所有的CSS樣式都可以。通過::backdrop偽類選擇器，我們可以用它來設(shè)置背景的樣式。

例如：

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

下面是一個基本的對話框，因?yàn)闆]有設(shè)置open屬性，所以它不會在視覺上顯示任何東西。您需要使用JavaScript API來顯示/隱藏它:

<dialog>這是dialog對話框！</ dialog>

dialog元素的.show()和.close()兩個api分別是顯示和關(guān)閉對話框，通過在DOM元素上使用這兩個api，您可以顯示和關(guān)閉對話框。

例如：

<!-- HTML -->
<dialog>
  <p>這是dialog對話框！</p>
  <button id="close">關(guān)閉對話框</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>

你可以傳遞一個參數(shù)給dialog.close()。通過監(jiān)聽dialog元素的close事件，該dialog.returnValue屬性將返回給定的值。

如：

<!--HTML-->
<dialog>
  <p>這是dialog對話框！</p>
  <p><input type="text" id="return_value" value="" placeholder="請輸入內(nèi)容"/></p>
  <button id="close">關(guān)閉對話框</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);
  };
  
  //監(jiān)聽dialog元素的close事件
  dialog.addEventListener("close", function(){
    alert(this.returnValue);
  });
</script>

顯示dialog對話框的另一個api是.showModal()

如果你不希望用戶與對話框以外的其他頁面元素對象進(jìn)行交互，那么請使用.showModal()打開對話框而不是使用.show()。用.showModal()打開的對話框會有一個全窗口的半透明背景層，阻斷用戶與對話框之外的頁面元素對象進(jìn)行交互，同時(shí)對話框會默認(rèn)顯示在窗口正中間（上下左右都居中）；而用.show()打開的對話框會默認(rèn)顯示在窗口頂部（可以通過css實(shí)現(xiàn)居中顯示）。

關(guān)閉對話框后，close會觸發(fā)一個事件。另外，用戶可以通過輸入“Escape”鍵來關(guān)閉模式對話框。這將激發(fā)cancel您可以取消使用的事件event.preventDefault()。

與表單集成使用

您可以使用form[method="dialog"]將表單與一個<dialog>元素集成使用。表單提交后，它會關(guān)閉對話框并設(shè)置dialog.returnValue到value已使用的提交按鈕。

此外，您可以使用該autofocus屬性在彈出對話框時(shí)自動將焦點(diǎn)對準(zhǔn)對話框內(nèi)的窗體控件。

例如：

<!--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();
  };
  
  //監(jiān)聽dialog元素的close事件
  dialog.addEventListener("close", function(e){
    if(this.returnValue === "是"){
      alert(this.returnValue)
      //dosomething...
    }else{
      alert(this.returnValue)
      //dosomething...
    };
  });
</script>

瀏覽器兼容性

桌面瀏覽器只有谷歌瀏覽器支持dialog的完整功能（到本博文發(fā)表時(shí)），要實(shí)現(xiàn)跨瀏覽器兼容請使用dialog-polyfill。

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

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“怎么使用HTML5原生對話框元素并輕松創(chuàng)建模態(tài)框組件”這篇文章對大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!