js中常用的彈出對話框3種方式

更新時間：2010年08月21日 15:59:32 作者：

javascript下自帶的三個彈出對話框效果，需要的朋友可以參考下。下面對各個函數的說明也有使用用途，

1：只是提醒，不能對腳本產生任何改變；
2：一般用于確認，返回 true 或者 false ，所以可以輕松用于 if...else...判斷
3：一個帶輸入的對話框，可以返回用戶填入的字符串，常見于某些留言本或者論壇輸入內容那里的插入UBB格式圖片
下面我們分別演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>三種彈出對話框的用法實例</title> <script language="javascript"> function ale() {//這個基本沒有什么說的，就是彈出一個提醒的對話框 alert("我敢保證，你現在用的是演示一"); } function firm() {//利用對話框返回的值（true 或者 false） if(confirm("你確信要訪問腳本之家？")) {//如果是true ，那么就把頁面轉向thcjp.cnblogs.com location.href="http://www.dhdzp.com"; } else {//否則說明下了，赫赫 alert("你按了取消，那就是返回false"); } } function prom() { var name=prompt("請輸入您的名字","");//將輸入的內容賦給變量 name ， //這里需要注意的是，prompt有兩個參數，前面是提示的話，后面是當對話框出來后，在對話框里的默認值 if(name)//如果返回的有內容 { alert("歡迎您："+ name) } } </script> </head> <body> <p>對話框有三種</p> <p>1：只是提醒，不能對腳本產生任何改變；</p> <p>2：一般用于確認，返回 true 或者 false ，所以可以輕松用于 if else 判斷 </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>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章:

彈出對話框

W3C Group的JavaScript1.8 新特性介紹
在了解了JavaScript1.7的相關更新后，我們再繼續(xù)關注JavaScript1.8的新特性。在W3C Group帶來的JavaScript系列特性文章中，JavaScript1.8的更新相對較少！
2009-05-05
JavaScript Math.floor方法(對數值向下取整)
這篇文章主要介紹了Math.floor 方法用于對數值向下取整，即得到小于或等于該數值的最大整數,需要的朋友可以參考下
2015-01-01
JavaScript中property和attribute的區(qū)別詳細介紹
這篇文章主要介紹了JavaScript中property和attribute的區(qū)別詳細介紹,本文總結了定義、相同這處、不同之處、瀏覽器兼容性上的差別等內容,并建議優(yōu)先選擇property,需要的朋友可以參考下
2015-03-03
javascript中interval與setTimeOut的區(qū)別示例介紹
這篇文章主要介紹了javascript中interval與setTimeOut的區(qū)別,需要的朋友可以參考下
2014-03-03
命令行下執(zhí)行TypeScript文件的三種方法
本文講解了命令行下執(zhí)行TypeScript腳本文件的三種方法,需要的朋友可以參考下
2022-10-10
實例講解JS中數組Array的操作方法
這篇文章主要介紹了JS中數組Array的操作方法,并用代碼實例講解,需要的朋友可以參考下
2014-05-05
Javascript入門學習第六篇 js DOM編程
上篇文章納悶的問題，將在這章和以后的幾章里，慢慢搞定。從今天起，開始學習DOM編程讓我們慢慢稱為一名初級的js程序員。然后往js匠人方向發(fā)展。
2008-07-07
JavaScript中的anchor()方法使用詳解
這篇文章主要介紹了JavaScript中的anchor()方法使用,是JS入門學習中的基礎知識,需要的朋友可以參考下
2015-06-06
JavaScript中l(wèi)ength屬性的使用方法
這篇文章主要介紹了JavaScript中l(wèi)ength屬性的使用方法,是JS入門學習中的基礎知識,需要的朋友可以參考下
2015-06-06
淺析Javascript ES6中的原生Promise
ES6標準出爐之前，一個幽靈，回調的幽靈，游蕩在JavaScript世界。正所謂世界本沒有回調，寫的人多了也就有了。接下來就來簡單介紹Javascript ES6中的原生Promise，有需要的可以參考借鑒。
2016-08-08