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

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

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

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

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

<!--按鈕觸發(fā)模態(tài)框-->
<buttonclass="btnbtn-primarybtn-lg"data-toggle="modal"data-target="#myModal">
開始演示模態(tài)框
</button>
<!--模態(tài)框（Modal）-->
<divclass="modalfade"id="myModal"tabindex="-1"role="dialog"aria-labelledby="myModalLabel"aria-hidden="true">
<divclass="modal-dialog">
<divclass="modal-content">
<divclass="modal-header">
<buttontype="button"class="close"data-dismiss="modal"aria-hidden="true">
&times;
</button>
<h5class="modal-title"id="myModalLabel">
模態(tài)框（Modal）標(biāo)題
</h5>
</div>
<divclass="modal-body">
在這里添加一些文本
</div>
<divclass="modal-footer">
<buttontype="button"class="btnbtn-default"data-dismiss="modal">關(guān)閉
</button>
<buttontype="button"class="btnbtn-primary">
提交更改
</button>
</div>
</div><!--/.modal-content-->
</div><!--/.modal-->
</div>

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

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

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

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

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

上圖展示了一個(gè)最基本的模態(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元素還引入了一個(gè)新的偽類選擇器::backdrop，通過瀏覽器查看到默認(rèn)的::backdrop樣式如下：

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

設(shè)置對(duì)話框樣式

我們可以像任何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:0015pxlightgray;
}

dialog::backdrop{
background:rgba(black,.5);
}

上面的樣式效果如下圖：

對(duì)話框操作 API

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

<dialog>這是dialog對(duì)話框！</dialog>

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

例如：

<!--HTML-->
<dialog>
<p>這是dialog對(duì)話框！</p>
<buttonid="close">關(guān)閉對(duì)話框</button>
</dialog>
<buttonid="show">顯示對(duì)話框</button>

<!--script-->
<script>
vardialog=document.querySelector("dialog");

document.querySelector("#show").onclick=function(){
dialog.show();
};

document.querySelector("#close").onclick=function(){
dialog.close();
};
</script>

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

如：

<!--HTML-->
<dialog>
<p>這是dialog對(duì)話框！</p>
<p><inputtype="text"id="return_value"value=""placeholder="請(qǐng)輸入內(nèi)容"/></p>
<buttonid="close">關(guān)閉對(duì)話框</button>
</dialog>
<buttonid="show">顯示對(duì)話框</button>

<!--script-->
<script>
vardialog=document.querySelector("dialog");

document.querySelector("#show").onclick=function(){
dialog.showModal();
};

document.querySelector("#close").onclick=function(){
varval=document.querySelector("#return_value").value;
dialog.close(val);
};

//監(jiān)聽dialog元素的close事件
dialog.addEventListener("close",function(){
alert(this.returnValue);
});
</script>

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

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

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

與表單集成使用

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

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

例如：

<!--HTML-->
<dialogid="dialog">
<formmethod="dialog">
<p>你是否同意使用條款？</p>
<p><textareaclass="form-control"disabled>條款要求...</textarea></p>
<buttontype="submit"value="是">是</button>
<buttontype="submit"value="否"autofocus>否</button>
</form>
</dialog>
<buttonid="show">顯示表單對(duì)話框</button>

<!--script-->
<script>
vardialog=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)跨瀏覽器兼容請(qǐng)使用dialog-polyfill。

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

總結(jié)

以上是生活随笔為你收集整理的怎么使用HTML5原生对话框元素并轻松创建模态框组件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。