整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
TML對(duì)話框已經(jīng)停留了一段時(shí)間，但是直到最近，它還不是W3C推薦規(guī)范的一部分。既然主流瀏覽器已經(jīng)開始支持對(duì)話元素，我們很可能會(huì)看到它被廣泛使用。本文簡(jiǎn)要介紹了我們?nèi)绾问褂脤?duì)話框，為什么需要新的元素以及如何使用它。
對(duì)話框是一種可用于多種方式的設(shè)計(jì)模式，包括但不限于：顯示重要信息，請(qǐng)求用戶選擇或擴(kuò)展現(xiàn)有內(nèi)容。雖然對(duì)話可以以不同的方式進(jìn)行，但是最常用的是模態(tài)，與疊加層中的其他內(nèi)容隔離。
直到新元素發(fā)布，要實(shí)現(xiàn)一個(gè)對(duì)話框到一個(gè)網(wǎng)站，你將不得不從頭開始編寫或使用外部庫 - 這種組件沒有標(biāo)準(zhǔn)的語法或默認(rèn)樣式。缺乏標(biāo)準(zhǔn)意味著瀏覽器和屏幕閱讀器等輔助技術(shù)默認(rèn)情況下無法區(qū)分對(duì)話框相關(guān)內(nèi)容和其他頁面內(nèi)容。
為了解決可訪問性問題，開發(fā)人員必須使用aria屬性（如role =“dialog”）來描述對(duì)話框中的內(nèi)容。正確管理鍵盤焦點(diǎn)對(duì)于使用對(duì)話框的可訪問性也很重要，例如，對(duì)話框中必須至少有一個(gè)可調(diào)焦的控件。
一些偉大的庫被創(chuàng)建，使開發(fā)者更容易實(shí)現(xiàn)可訪問的對(duì)話框，比如Edenspiekermann的A11y Dialog。除了這樣的庫之外，像Bootstrap和Foundation這樣的CSS框架也使得它們內(nèi)置的模式/對(duì)話框變得可用。
盡管今天這些庫和框架仍然是相關(guān)的和有用的，但是具有用于對(duì)話的本地HTML元素確保了這樣的經(jīng)常使用的設(shè)計(jì)模式對(duì)于每個(gè)人都是很好的語法，標(biāo)準(zhǔn)和可訪問性。另外，在瀏覽器中內(nèi)置對(duì)話邏輯可以節(jié)省那些寶貴的代碼字節(jié)！
現(xiàn)在我們明白為什么需要這個(gè)了，我們來看看我如何使用對(duì)話框元素。
對(duì)話框元素的標(biāo)記就像在<dialog>標(biāo)簽中包裝一些內(nèi)容一樣簡(jiǎn)單。為了使對(duì)話框起作用，我們需要一個(gè)按鈕來打開它，還有一個(gè)按鈕可以關(guān)閉或者撤銷它。
要使對(duì)話框默認(rèn)打開，可以添加一個(gè)打開的屬性。
如果您的對(duì)話框包含一個(gè)表單，則表單元素的方法屬性應(yīng)設(shè)置為對(duì)話框。
沒有JavaScript，對(duì)話元素將不會(huì)交互。我們可以將上面的HTML例子中的按鈕和對(duì)話框元素連接到一些點(diǎn)擊事件監(jiān)聽器。
就是這樣，我們有一個(gè)可以正常運(yùn)行本地化的對(duì)話框！
對(duì)話框元素的默認(rèn)樣式不會(huì)適合每個(gè)人的口味......比較幸運(yùn)的是，我們可以用CSS來設(shè)計(jì)樣式。
還有一個(gè)backdrop可以幫助我們選擇不同的背景
完整demo演示如下：
早在2014年，Chrome和Opera就開始支持對(duì)話元素，最近又推出了Chrome Android和三星瀏覽器。它也支持Firefox，但必須通過about：config啟用。盡管有幾個(gè)主要的瀏覽器不支持dialog，但有一個(gè)很好的polyfill可用。
JavaScript中有三種樣式的對(duì)話框，分別起到提示、確認(rèn)和輸入的作用，對(duì)應(yīng)三種函數(shù)：alert、confirm、prompt
alert：該對(duì)話框只用于提醒，不能對(duì)腳本產(chǎn)生任何變化，他只有一個(gè)參數(shù)，即為需要提示的信息，沒有返回值。
confirm：該對(duì)話框一般用于確認(rèn)信息。他只有一個(gè)參數(shù)，返回值為true或false。
prompt：該對(duì)話框可以進(jìn)行輸入，并返回用戶輸入的字符串。他有兩個(gè)參數(shù)，第一個(gè)參數(shù)顯示提示信息，第二個(gè)參數(shù)顯示輸入框（和默認(rèn)值）。
前端學(xué)習(xí)，就上以人為本前端學(xué)習(xí)網(wǎng)！www.yirenweiben.com
Example：
<!DOCTYPE html>
<html>
<head lang=”en”>
<meta charset=”UTF-8″>
<title>三種彈出對(duì)話框的用法實(shí)例</title>
<script language=”JavaScript”>
function ale(){
alert(“嘿嘿，演示一完畢”);
}
function firm(){
if(confirm(“確定跳轉(zhuǎn)到“以人為本前端學(xué)習(xí)”？”)){
// 這是在本窗口打開
// location.href=”http://www.yirenweiben.com”;
// 新窗口打開
window.open(“http://www.yirenweiben.com/”,”_blank”);
}else{
alert(““以人為本前端學(xué)習(xí)”的網(wǎng)址是www.yirenweiben.com歡迎常來!”);
}
}
function prom(){
var name = prompt(“請(qǐng)輸入您的名字”,”張三”);
if (name != null & name!=””){
alert(“歡迎您：” + name);
}else{
alert(“請(qǐng)輸入您的名字！”);
}
}
</script>
</head>
<body>
<p>對(duì)話框有三種</p>
<p>1：只是用于提醒，不能對(duì)腳本產(chǎn)生任何改變；</p>
<p>2：一般用于確認(rèn)，返回true或者false；</p>
<p>3：一個(gè)帶輸入的對(duì)話框，可以返回用戶填入的字符串</p>
<p>下面我們分別演示：</p>
<p>演示一：提醒對(duì)話框</p>
<input type=”submit” value=”提交” onclick=”ale()”>
<p>演示二：確認(rèn)對(duì)話框</p>
<input type=”submit” value=”提交” onclick=”firm()”>
<p>演示三：要求用戶輸入，然后給個(gè)結(jié)果</p>
<input type=”submit” value=”提交” onclick=”prom()”>
</body>
</html>
TML 的內(nèi)容遠(yuǎn)不止 <div> 、<a>和 <p> 。如此多更復(fù)雜、更強(qiáng)大的標(biāo)簽，你可能從未使用過。具有從交互式圖像到復(fù)雜的 UI 組件的有趣功能。
但是，接下來就是 meter -- 也被稱為 progress 在橫行：
dfn -- 用于我們將在頁面中定義的任何內(nèi)容：
原生 HTML 對(duì)話框！
們稱這樣的可點(diǎn)擊圖片為圖像地圖。
超級(jí)神秘的縮寫在這里，它是做什么的？
<a> 使用頁面的域名來獲取他們將導(dǎo)航您的完整 URL：
但是，當(dāng)你在 HTML 中創(chuàng)建一個(gè)基礎(chǔ)的 <base> 會(huì)發(fā)生什么？
現(xiàn)在他們都使用 <base> 的 href 中的硬編碼值來獲取完整的 URL：
像 Angular 和 Flutter Web 這樣的框架也在使用它：
對(duì)于日期和時(shí)間：
<hgroup> 表示標(biāo)題標(biāo)簽和下面的一些內(nèi)容是相關(guān)的
代表鍵盤輸入：
表示書籍、歌曲、電影或其他創(chuàng)作作品的標(biāo)題：
所以，這些是 HTML 中最不為人知和使用的 10 個(gè)標(biāo)簽。盡管使用率低，但在各種情況下都非常有用。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
