您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)使用HTML5中dialog來實現(xiàn)模擬彈窗的方法的內(nèi)容。小編覺得挺實用的,因此分享給大家做個參考。一起跟隨小編過來看看吧。
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 元素是有效的,用戶可以與它進(jìn)行交互。
近期,網(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é)到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。