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