社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > H5教程 > 主體

HTML5 dialog是什麼？怎麼使用HTML5中的dialog來實作模擬彈跳窗？

寻∝梦
發布： 2018-08-15 17:41:23
原創
4711 人瀏覽過

HTML5 dialog是什麼？怎麼使用HTML5中的dialog來實作模擬彈跳窗？本篇文章主要講述HTML5中的dialog標籤的定義和具體用法，還有如何在HTML5中透過dialog標籤來實現模擬彈跳窗。

HTML5 dialog標籤的定義與用法：

標籤定義對話，例如交談。

這有實例：

<dialog>
  <dt>老师</dt>
  <dd>1+1 等于？</dd>
  <dt>学生</dt>
  <dd>2</dd>
  <dt>老师</dt>
  <dd>答对了！</dd>
</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元素：

是一個HTML5(精確來說是5.1)元素。它歸類為“切片根”，類似，
，和
元素,其中每個都會建立一個新的獨立的內容區域，你可以把它作為body的一個孩子，或是嵌套的元素，如
或
——兩種元素都有效，如下所示。 

<body>
      <div> 
            <dialog></dialog>
      </div> 
      <section> 
            <dialog></dialog> 
      </section>
            <dialog></dialog>
</body>
登入後複製

預設情況下，支援的瀏覽器(Chrome 37 和Opera 27 )會以隱藏的形式呈現

元素，只有呼叫JavaScript的show()或showModal()方法才可以顯現，呼叫close()方法再次將其隱藏。通常情況下，我們會在一個click事件上執行此方法，如下所示：

var $accountDelete = $(&#39;#delete-account&#39;), 
      $accountDeleteDialog = $(&#39;#confirm-delete&#39;); 
  $accountDelete.on(&#39;click&#39;, function() { 
      $accountDeleteDialog[0].showModal(); 
  }); 
  $(&#39;#cancel&#39;).on(&#39;click&#39;, function() {
      $accountDeleteDialog[0].close(); 
  });
登入後複製

自訂樣式：

像大多數其他的元素一樣，對話框可以輕鬆覆蓋瀏覽器的預設樣式。所以，你可以自訂其樣式。例如，使對話方塊邊框更薄，使角落圓潤，並添加陰影效果等。

此外，當

元素以模態顯示時(使用ShowModal()方法)，我們會加入一個額外的偽元素::backdrop。 ::backdrop元素會立即駐留在對話方塊下面，覆蓋整個視區和下方的其它元素。

瀏覽器支援：

##目前，只有 Chrome 和 Safari 6 支援 標籤。

【相關推薦】

HTML IMG標籤的屬性是有哪些？了解IMG標籤的用法

HTML5中web是什麼？ web儲存中的元素有哪些？

以上是HTML5 dialog是什麼？怎麼使用HTML5中的dialog來實作模擬彈跳窗？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
HTML5 dialog的用法 HTML5 dialog实现模拟弹窗
來源：php.cn
上一篇：HTML5中的aside標籤怎麼用？ HTML5aside側邊欄的具體使用方法你知道嗎？ 下一篇：HTML5中的header標籤是什麼意思？ HTML5中header標籤具體使用方法你知道嗎？
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
使用網格建立此特定設計：逐步指南 我正在嘗試創建一個類似於此圖像的佈局，我嘗試過使用此網格但無法實​​現。 <ulclass="container"><liclass=&quo...
來自於 2024-04-06 20:29:08
0
2
492
使用具有 3 級層次結構的自訂分類法選擇 woocommerce 相關產品 我有一家woocommerce商店，其自訂分類為「運動」。此分類有三個等級-父級、子級、子級-例如：室內運動>競技場運動>籃球。如果使用者查看籃球項目，那麼我希望相關產...
來自於 2024-04-06 20:05:30
0
1
544
如何在 livewire 惰性佔位符中使用 laravel 元件 我想在livewire3佔位符內添加我的laravel組件的骨架到目前為止我已經嘗試過：通過包含Laravel組件來實現Livewire類：publicfunctionplaceh...
來自於 2024-04-06 20:02:10
0
2
543
使用MySQL SQL查詢計算另一張表中欄位的總和 我有一個這樣的模式：具有屬性“user_id”和“username”的用戶表以及具有屬性“customer_id”（user_id的FK）和“finalPrice”的訂單表資料庫架...
來自於 2024-04-06 19:39:29
0
1
441
在網路應用程式中顯示版本資訊的最佳實踐是什麼？ 我正在開發一個網頁應用程式。在網路應用程式中顯示版本資訊的最佳實踐是什麼？我正在使用語義版本控制，並且我已經有了semver，例如1.2.0但我很好奇在哪裡顯示它的最佳方式以及如何...
來自於 2024-04-06 19:13:16
0
2
476
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板