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> 標籤。
【相關推薦】
HTML IMG標籤的屬性是有哪些？瞭解IMG標籤的用法
HTML5中web是什嗎？web儲存中的元素有哪些？
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
