js彈窗的3種方式：alert、confirm、prompt
阿新 • • 發佈：2019-02-16
程式碼比較直觀，大家可以複製下來，跑一下就會體會到用法了
<%@page contentType="text/html"%> <%@page pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>js三種彈出對話方塊的用法例項</title> <script language="javascript"> function ale() { //這個基本沒有什麼說的，就是彈出一個提醒的對話方塊 alert("我敢保證，你現在用的是演示一"); } function firm() { //利用對話方塊返回的值 （true 或者 false） if(confirm("你確信要二十二畫生的部落格？")) { //如果是true ，那麼就把頁面轉向thcjp.cnblogs.com location.href = "http://blog.csdn.net/liuchangjie0112"; } else { //否則說明下了 alert("你按了取消，那就是返回false"); } } function prom() { var name = prompt("請輸入您的名字", ""); //將輸入的內容賦給變數 name ， //這裡需要注意的是，prompt有兩個引數，前面是提示的話，後面是當對話框出來後，在對話方塊裡的預設值 if(name) //如果返回的有內容 { alert("歡迎您：" + name) } else { alert("不能為空") } } </script> </head> <body> <p>對話方塊有三種</p> <p>1：只是提醒，不能對指令碼產生任何改變；</p> <p>2：一般用於確認，返回 true 或者 false ，所以可以輕鬆用於 ifelse判斷 </p> <p>3： 一個帶輸入的對話方塊，可以返回使用者填入的字串，常見於某些留言本或者論壇輸入內容那裡的 插入UBB格式圖片 </p> <p>下面我們分別演示：</p> <p>演示一：提醒 對話方塊</p> <p> <input type="submit" name="Submit" value="提交" onclick="ale()" /> </p> <p>演示二 ：確認對話方塊 </p> <p> <input type="submit" name="Submit2" value="提交" onclick="firm()" /> </p> <p>演示三 ：要求使用者輸入，然後給個結果</p> <p> <input type="submit" name="Submit3" value="提交" onclick="prom()" /> </p> </body> </html>
區別與聯絡：
alert()、confirm()、prompt()的區別和聯絡：
警告框alert()
alert是警告框，只有一個按鈕“確定”無返回值，警告框經常用於確保使用者可以得到某些資訊。當警告框出現後，使用者需要點選確定按鈕才能繼續進行操作。語法：alert("文字")
確認框confirm()
confirm是確認框，兩個按鈕，確定或者取消，返回true或false。確認框用於使使用者可以驗證或者接受某些資訊。當確認框出現後，使用者需要點選確定或者取消按鈕才能繼續進行操作。如果使用者點選確認，那麼返回值為 true。如果使用者點選取消，那麼返回值為 false。語法：confirm("文字")
提示框prompt()
prompt是提示框，返回輸入的訊息，或者其預設值提示框經常用於提示使用者在進入頁面前輸入某個值。當提示框出現後，使用者需要輸入某個值，然後點選確認或取消按鈕才能繼續操縱。如果使用者點選確認，那麼返回值為輸入的值。如果使用者點選取消，那麼返回值為 null。語法：prompt("文字","預設值")