整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
TML對話框已經停留了一段時間，但是直到最近，它還不是W3C推薦規范的一部分。既然主流瀏覽器已經開始支持對話元素，我們很可能會看到它被廣泛使用。本文簡要介紹了我們如何使用對話框，為什么需要新的元素以及如何使用它。
對話框是一種可用于多種方式的設計模式，包括但不限于：顯示重要信息，請求用戶選擇或擴展現有內容。雖然對話可以以不同的方式進行，但是最常用的是模態，與疊加層中的其他內容隔離。
直到新元素發布，要實現一個對話框到一個網站，你將不得不從頭開始編寫或使用外部庫 - 這種組件沒有標準的語法或默認樣式。缺乏標準意味著瀏覽器和屏幕閱讀器等輔助技術默認情況下無法區分對話框相關內容和其他頁面內容。
為了解決可訪問性問題，開發人員必須使用aria屬性（如role =“dialog”）來描述對話框中的內容。正確管理鍵盤焦點對于使用對話框的可訪問性也很重要，例如，對話框中必須至少有一個可調焦的控件。
一些偉大的庫被創建，使開發者更容易實現可訪問的對話框，比如Edenspiekermann的A11y Dialog。除了這樣的庫之外，像Bootstrap和Foundation這樣的CSS框架也使得它們內置的模式/對話框變得可用。
盡管今天這些庫和框架仍然是相關的和有用的，但是具有用于對話的本地HTML元素確保了這樣的經常使用的設計模式對于每個人都是很好的語法，標準和可訪問性。另外，在瀏覽器中內置對話邏輯可以節省那些寶貴的代碼字節！
現在我們明白為什么需要這個了，我們來看看我如何使用對話框元素。
對話框元素的標記就像在<dialog>標簽中包裝一些內容一樣簡單。為了使對話框起作用，我們需要一個按鈕來打開它，還有一個按鈕可以關閉或者撤銷它。
要使對話框默認打開，可以添加一個打開的屬性。
如果您的對話框包含一個表單，則表單元素的方法屬性應設置為對話框。
沒有JavaScript，對話元素將不會交互。我們可以將上面的HTML例子中的按鈕和對話框元素連接到一些點擊事件監聽器。
就是這樣，我們有一個可以正常運行本地化的對話框！
對話框元素的默認樣式不會適合每個人的口味......比較幸運的是，我們可以用CSS來設計樣式。
還有一個backdrop可以幫助我們選擇不同的背景
完整demo演示如下：
早在2014年，Chrome和Opera就開始支持對話元素，最近又推出了Chrome Android和三星瀏覽器。它也支持Firefox，但必須通過about：config啟用。盡管有幾個主要的瀏覽器不支持dialog，但有一個很好的polyfill可用。
習過js的小伙伴會發現，我們在一些實例中用到了alert()方法、prompt()方法、prompt()方法，他們都是在屏幕上彈出一個對話框，并且在上面顯示括號內的內容，使用這種方法使得頁面的交互性更精彩，實際上我們經常會在進行網頁瀏覽時簡單這種類型的對話框，在用戶與應用程序進行雙向交流時，經常要用到對話框。
javascript的三種對話框是通過調用window對象的三個方法alert()，confirm()和prompt()來獲得，可以利用這些對話框來完成js的輸入和輸出，實現與用戶能進行交互的js代碼。
今天就來簡單介紹一下js中的三種彈出對話框
第一種：alert()方法
alert()方法是這三種對話框中最容易使用的一種，可以用來簡單而明了地將alert()括號內的文本信息顯示在對話框中，我們將它稱為警示對話框，要顯示的信息放置在括號內，該對話框上包含一個“確認”按鈕，用戶閱讀完所顯示的信息后，只需單擊該按鈕就可以關閉對話框。下面來看一個使用alert()方法的例子，代碼如下所示：
<html> <head><title>編寫html頁面</title> <script language="javascript"> //JavaScript腳本標注 alert("上聯：山石巖下古木枯");//在頁面上彈出上聯 alert("下聯：白水泉邊少女妙");//在頁面上彈出下聯 </script> </head> </html>
執行上面的小例子，在頁面上彈出對話框并顯示一句話“上聯：山石巖下古木枯”，如下所示：
接著，單擊“確認”按鈕后再顯示第二個對話框并顯示“白水泉邊少女妙！”，效果如下；
在頁面上彈出對話框并顯示一句話“上聯：山石巖下古木枯”，單擊“確認”按鈕后再顯示第2個對話框并顯示“白水泉邊少女妙！”我們來分析一下這個小例子：
a、在<script>腳本塊中兩次調用alert()方法；
b、在每個alert()括號內分別添加了一段文本信息，運行出現如下圖所示的頁面，當使用鼠標單擊頁面上的“確定”按鈕后，出現第二個頁面，再點擊“確定”按鈕后就關閉頁面上的對話框。 注意：兩個對話框是分別顯示的，而不是一個覆蓋另一個，這是因為js實在執行完第一個alert()并等到用戶點擊“確認”按鈕之后才去執行第二個alert()的。
alert()是js的window對象的一個方法，調用時可以寫成window.alert()，也可以寫成alert()，功能都是產生一個帶確認按鈕的對話框，上面顯示括號內的信息，
第二種：confirm()方法
confirm()方法與alert()方法的使用十分類似，不同點是在該種對話框上除了包含一個“確認”按鈕外，還有一個“取消”按鈕，這種對話框稱為確認對話框，在調用window對象的confirm()方法以及后面介紹的prompt()方法時也可以不寫window。下面來看一個關于confirm()的小例子,代碼如下所示：
<html> <head> <title>編寫html頁面</title> <script language="javascript"> //js腳本標注 confirm("上聯：一但重泥攔子路；下聯：兩岸夫子笑顏回"); //在頁面上彈出確認對話框 </script> </head> </html>
顯示效果如下：
分析一下這個小例子：
a、在<script>腳本塊中添加confirm()方法、
b、在confirm()括號內添加了一段文本信息，運行效果如上圖所示，如果用戶單擊“確認”按鈕，則confirm()方法會返回true，如果用戶單擊“取消”按鈕，則confirm()方法會返回false，無論用戶選擇哪個按鈕，都會關閉對話框，而繼續執行javascript代碼。單擊“確認”或“取消”按鈕都是關閉對話框，似乎沒有什么區別，實際上，無論是單擊“確認”或“取消”按鈕都會返回一個布爾值，這樣就 可以再幕后有一些js代碼來發揮按鈕的作用，請大家看下面的例子，體會使用confirm()返回布爾值的妙處。代碼如下：
<html> <head> <title>編寫html頁面</title> <script language="javascript"> //js腳本標注 var con; con=confirm("你喜歡玫瑰花么?"); //在頁面上彈出對話框 if(con==true)alert("非常喜歡!"); else alert("不喜歡!"); </script> </head> </html>
我們來分析一下這個小例子：
a、在<script>腳本塊中聲明了一個變量con。
b、con=confirm()一句將confirm()方法返回的布爾值賦給con。
c、通過if語句來使用con的值，分別執行不同的語句；執行的效果如下：
如果單擊頁面的確認框上的“確定”按鈕后，出現如下圖所示的頁面：
如果單擊“取消”按鈕，則出現如下圖所示的頁面：
第三種： prompt()方法
alert()方法和confirm()方法的使用十分類似，都是僅僅顯示已有的信息，但用戶不能輸入自己的信息，但是prompt()可以做到這點，她不但可以顯示信息，而且還提供了一個文本框要求用戶使用鍵盤輸入自己的信息，同時她還包含“確認”或“取消”兩個按鈕，如果用戶“確認”按鈕，則prompt()方法返回用戶在文本框中輸入的內容（是字符串類型)或者初始值(如果用戶沒有輸入信息);如果用戶單擊“取消”按鈕，則prompt()方法返回null，我們稱這種對話框為提示框，在這三種對話框中，她的交互性最好。
看下面一個小例子：在頁面上兩次彈出提示對話框，使用戶能輸入有關信息，代碼如下：
<html> <head> <title>編寫html頁面</title> <script language="javascript"> //js腳本標注 var name,age; name=prompt("請問你叫什么名字?"); /*在頁面上彈出提示對話框， 將用戶輸入的結果賦給變量name*/ alert(name); //輸出用戶輸入的信息 age=prompt("你今年多大了?","請在這里輸入年齡"); /*在頁面上再一次彈出提示對話框， 講用戶輸入的信息賦給變量age*/ alert(age)//輸出用戶輸入的信息 </script> </head> </html>
運行上面的程序，效果如下所示：
點擊確定，會有這么驚喜nie：
我們再點擊確定按鈕：
再點擊確定按鈕：
分析一下這個小例子
a、在<script>腳本塊中添加了兩個prompt()方法。
b、在第一個prompt()括號內添加了一段文本信息。
c、name=prompt()一句是將用戶在文本框中輸入的信息賦給變量name。
alert()、confirm()、prompt()的區別和聯系：
警告框alert()
alert是警告框，只有一個按鈕“確定”無返回值，警告框經常用于確保用戶可以得到某些信息。當警告框出現后，用戶需要點擊確定按鈕才能繼續進行操作。語法：alert("文本")。
確認框confirm()
confirm是確認框，兩個按鈕，確定或者取消，返回true或false。確認框用于使用戶可以驗證或者接受某些信息。當確認框出現后，用戶需要點擊確定或者取消按鈕才能繼續進行操作。如果用戶點擊確認，那么返回值為 true。如果用戶點擊取消，那么返回值為 false。語法：confirm("文本")
提示框prompt()
prompt是提示框，返回輸入的消息，或者其默認值提示框經常用于提示用戶在進入頁面前輸入某個值。當提示框出現后，用戶需要輸入某個值，然后點擊確認或取消按鈕才能繼續操縱。如果用戶點擊確認，那么返回值為輸入的值。如果用戶點擊取消，那么返回值為 null。語法：prompt("文本","默認值")
1），彈窗及參數說明
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css"></style>
<link rel="stylesheet" type="text/css" href="#">
</head>
<body>
<input type="button" value="打開新窗口" onclick="openNewWin()" />
</body>
<script type="text/javascript">
function openNewWin() {
var openWindow = window.open("newTest.html",
"彈到新窗口",
"height=500, width=800, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no");
}
/***
(00) window.open 彈出新窗口的命令
(01) newTest.html 彈出窗口的文件名，或請求地址
(02) 彈出窗口的名字（不是文件名），非必須，可用空''代替
(03) height=100 窗口高度
(04) width=400 窗口寬度
(05) top=0 窗口距離屏幕上方的像素值
(06) left=0 窗口距離屏幕左側的像素值
(07) toolbar=no 是否顯示工具欄，yes為顯示
(08) menubar 表示菜單欄
(09) scrollbars 表示滾動欄
(10) resizable=no 是否允許改變窗口大小，yes為允許
(11) location=no 是否顯示地址欄，yes為允許
(12) status=no 是否顯示狀態欄內的信息（通常是文件已經打開），yes為允許
***/
</script>
</html>
（2），彈窗并居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css"></style>
<link rel="stylesheet" type="text/css" href="#">
</head>
<body>
<input type="button" value="彈出的窗口居中" onclick="testOpenCenterWindow()" />
</body>
<script type="text/javascript">
function testOpenCenterWindow() {
// 窗口垂直位置水平位置
var iTop = (window.screen.availHeight - 30 - 500) / 2;
var iLeft = (window.screen.availWidth - 10 - 800) / 2; //減width
var openWindow = window.open("newTest.html"
,"測試彈窗口并居中"
,"height=500, width=800, top="+ iTop
+", left="+ iLeft
+", toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no"
);
}
</script>
</html>
（3），窗口 location屬性
window對象location屬性是引用Location對象，它表示該窗口顯示文檔的URL
window.location.href="page1.jsp"; //當前窗口顯示指定頁面
window.close(); //關閉本頁面（4），窗口與父窗口通信
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
