這篇文章給大家分享的是有關使用HTML5中dialog來實現模擬彈窗的方法的內容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。
HTML5 dialog標簽的定義和用法：
<dialog> 標簽定義對話，比如交談。
這有實例：
<dialog> <dt>老師</dt> <dd>1+1 等于？</dd> <dt>學生</dt> <dd>2</dd> <dt>老師</dt> <dd>答對了！</dd> </dialog>
提示和注釋：
提示：對話中的每個句子都必須屬于 <dt> 標簽所定義的部分。請看下面的例子。
標簽定義及使用說明：
<dialog> 標簽定義一個對話框、確認框或窗口。
這是實例：
<table border="1"> <tr> <th>January <dialog open>This is an open dialog window</dialog></th> <th>February</th> <th>March</th> </tr> <tr> <td>31</td> <td>28</td> <td>31</td> </tr> </table>
HTML5 dialog標簽屬性：
open ：open規定 dialog 元素是有效的，用戶可以與它進行交互。
近期,網頁上的的許多流程都需要用戶完全同意才可以完成。例如，用戶可能需要刪除帳戶，更改他們的用戶名，或確認貨幣交易。
這種情況下，常用的用戶體驗(UX,User experience design)是顯示一個具有兩個按鈕的對話框。一個是取消，一個是繼續。這么多年，我們一直依靠JavaScript庫實現此效果，但在本篇文章中，我們要用<dialog>元素實現此效果。
使用dialog元素：
<dialog>是一個HTML5(精確來說是5.1)元素。它歸類為“切片根”，類似<body>，<blockquote>，和<details>元素,其中每個都會建立一個新的獨立的內容區域，你可以把它作為body的一個孩子，或者是嵌套的元素，如<div>或<section>——兩種元素都有效，如下所示。
<body>
<div>
<dialog></dialog>
</div>
<section>
<dialog></dialog>
</section>
<dialog></dialog>
</body>默認情況下，支持的瀏覽器(Chrome 37+和Opera 27+)會以隱藏的形式呈現<dialog>元素，只有調用JavaScript的show()或showModal()方法才可以顯現，調用close()方法再次將其隱藏。通常情況下，我們會在一個click事件上執行此方法，如下所示：
var $accountDelete = $('#delete-account'),
$accountDeleteDialog = $('#confirm-delete');
$accountDelete.on('click', function() {
$accountDeleteDialog[0].showModal();
});
$('#cancel').on('click', function() {
$accountDeleteDialog[0].close();
});自定義樣式：
像大多數其他的元素一樣，對話框可以很容易覆蓋瀏覽器的默認樣式。所以，你可以自定義其樣式。例如，使對話框邊框更薄，使邊角圓潤，并添加陰影效果等。
此外，當<dialog>元素以模態顯示時(使用ShowModal()方法)，我們會添加一個額外的偽元素::backdrop。::backdrop元素會立即駐留在對話框下面，覆蓋整個視區和下方的其它元素。
瀏覽器支持：
目前，只有 Chrome 和 Safari 6 支持 <dialog> 標簽。
感謝各位的閱讀！關于使用HTML5中dialog來實現模擬彈窗的方法就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
