使用HTML5中dialog來實現(xiàn)模擬彈窗的方法-創(chuàng)新互聯(lián)

這篇文章給大家分享的是有關(guān)使用HTML5中dialog來實現(xiàn)模擬彈窗的方法的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

“只有客戶發(fā)展了，才有我們的生存與發(fā)展！”這是創(chuàng)新互聯(lián)建站的服務(wù)宗旨！把網(wǎng)站當(dāng)作互聯(lián)網(wǎng)產(chǎn)品，產(chǎn)品思維更注重全局思維、需求分析和迭代思維，在網(wǎng)站建設(shè)中就是為了建設(shè)一個不僅審美在線，而且實用性極高的網(wǎng)站。創(chuàng)新互聯(lián)對成都網(wǎng)站設(shè)計、網(wǎng)站制作、網(wǎng)站制作、網(wǎng)站開發(fā)、網(wǎng)頁設(shè)計、網(wǎng)站優(yōu)化、網(wǎng)絡(luò)推廣、探索永無止境。

HTML5 dialog標(biāo)簽的定義和用法：

<dialog> 標(biāo)簽定義對話，比如交談。

這有實例：

<dialog>
  <dt>老師</dt>
  <dd>1+1 等于？</dd>
  <dt>學(xué)生</dt>
  <dd>2</dd>
  <dt>老師</dt>
  <dd>答對了！</dd>
</dialog>

提示和注釋：

提示：對話中的每個句子都必須屬于 <dt> 標(biāo)簽所定義的部分。請看下面的例子。

標(biāo)簽定義及使用說明：

<dialog> 標(biāo)簽定義一個對話框、確認(rèn)框或窗口。

這是實例：

<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標(biāo)簽屬性：

open ：open規(guī)定 dialog 元素是有效的，用戶可以與它進行交互。

近期,網(wǎng)頁上的的許多流程都需要用戶完全同意才可以完成。例如，用戶可能需要刪除帳戶，更改他們的用戶名，或確認(rèn)貨幣交易。

這種情況下，常用的用戶體驗(UX,User experience design)是顯示一個具有兩個按鈕的對話框。一個是取消，一個是繼續(xù)。這么多年，我們一直依靠JavaScript庫實現(xiàn)此效果，但在本篇文章中，我們要用<dialog>元素實現(xiàn)此效果。

使用dialog元素：

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

<body>
      <div> 
            <dialog></dialog>
      </div> 
      <section> 
            <dialog></dialog> 
      </section>
            <dialog></dialog>
</body>

默認(rèn)情況下，支持的瀏覽器(Chrome 37+和Opera 27+)會以隱藏的形式呈現(xiàn)<dialog>元素，只有調(diào)用JavaScript的show()或showModal()方法才可以顯現(xiàn)，調(diào)用close()方法再次將其隱藏。通常情況下，我們會在一個click事件上執(zhí)行此方法，如下所示：

var $accountDelete = $('#delete-account'), 
      $accountDeleteDialog = $('#confirm-delete'); 
  $accountDelete.on('click', function() { 
      $accountDeleteDialog[0].showModal(); 
  }); 
  $('#cancel').on('click', function() {
      $accountDeleteDialog[0].close(); 
  });

自定義樣式：

像大多數(shù)其他的元素一樣，對話框可以很容易覆蓋瀏覽器的默認(rèn)樣式。所以，你可以自定義其樣式。例如，使對話框邊框更薄，使邊角圓潤，并添加陰影效果等。

此外，當(dāng)<dialog>元素以模態(tài)顯示時(使用ShowModal()方法)，我們會添加一個額外的偽元素::backdrop。::backdrop元素會立即駐留在對話框下面，覆蓋整個視區(qū)和下方的其它元素。

瀏覽器支持：

目前，只有 Chrome 和 Safari 6 支持 <dialog> 標(biāo)簽。

感謝各位的閱讀！關(guān)于使用HTML5中dialog來實現(xiàn)模擬彈窗的方法就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)站題目：使用HTML5中dialog來實現(xiàn)模擬彈窗的方法-創(chuàng)新互聯(lián)
網(wǎng)站鏈接：http://m.rwnh.cn/article12/iepgc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、品牌網(wǎng)站建設(shè)、微信公眾號、品牌網(wǎng)站制作、網(wǎng)站制作、網(wǎng)站營銷

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

内射老阿姨1区2区3区4区_久久精品人人做人人爽电影蜜月_久久国产精品亚洲77777_99精品又大又爽又粗少妇毛片

使用HTML5中dialog來實現(xiàn)模擬彈窗的方法-創(chuàng)新互聯(lián)