快捷導(dǎo)航

JavaScript中常用的3種彈窗(警告框、確認(rèn)框、提示框)

更新時(shí)間：2023年09月19日 10:50:16 作者：浮生_Lee

JavaScript提供了幾種常用的彈窗方法,用于與用戶進(jìn)行交互或顯示提示消息,這篇文章主要給大家介紹了關(guān)于JavaScript中常用的3種彈窗的相關(guān)資料,分別包括警告框、確認(rèn)框、提示框,需要的朋友可以參考下

一、alert（警告框）

alert()方法是顯示一條彈出提示消息和確認(rèn)按鈕的警告框。
需要注意的是：

alert()是一個(gè)阻塞的函數(shù)，如果我們不點(diǎn)確認(rèn)按鈕，后面的內(nèi)容就不會(huì)加載出來(lái)。

代碼演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p>alert是阻塞的函數(shù)</p>
		<p>這句話只有在確認(rèn)彈出框的提示文本后才會(huì)顯示</p>
	</body>
    <script>
		alert("這是彈出框提示文本")
	</script>
</html>

注意:

1. 在點(diǎn)擊對(duì)話框"確定"按鈕前，不能進(jìn)行任何其它操作。

2. 消息對(duì)話框通?？梢杂糜谡{(diào)試程序。

3. alert輸出內(nèi)容，可以是字符串或變量，與document.write 相似。

二、confirm（確認(rèn)框）

confirm()方法是顯示一個(gè)含有指定消息和確認(rèn)和取消按鈕的確認(rèn)框。
如果點(diǎn)擊"確定"返回true，否則返回false。

代碼演示：

var x; 
var r=confirm("請(qǐng)按下按鈕!");
if (r==true){
	x="你按下的是\"確定\"按鈕。";
}
else{
	x="你按下的是\"取消\"按鈕。";
}
document.write(x)

三、prompt (提示框)

prompt()方法是顯示提示用戶進(jìn)行輸入的對(duì)話框。
這個(gè)方法返回的是用戶輸入的字符串。

代碼演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script>
			//方式一
			prompt("開心嗎?"); // 這個(gè)顯示內(nèi)容也可以不寫，但就沒(méi)有交互的意義了。
			//方式二
			var x; 
			var name=prompt("請(qǐng)輸入你的名字","Keafmd"); //顯示默認(rèn)文本 "Keafmd"
			if (name!=null && name!=""){ 
			 x="你好! " + name + "。";
			 document.write(x)
			} 
		</script>
		<title></title>
	</head>
	<body>
	</body>
</html>

附：window.prompt的確定和取消事件

在使用window.prompt彈窗時(shí)，怎么判斷用戶是否輸入內(nèi)容？又怎么區(qū)分用戶不輸入內(nèi)容的情況下點(diǎn)擊的是“確定”還是“取消”？

var reason = window.prompt(“請(qǐng)輸入審核不通過(guò)理由：”, “”);
//1. 單純判斷用戶是否填寫“審核不通過(guò)理由”： 
if(reason){ 
//用戶填寫了理由 
}else{ 
//用戶沒(méi)有填寫理由 
}
//2. 要區(qū)分用戶不輸入內(nèi)容點(diǎn)擊的是“確定”還是“取消”： 
if(reason){ 
alert(reason);//顯示輸入內(nèi)容
//用戶填寫了內(nèi)容并且點(diǎn)擊的是“確定” 
}else if(reason === “”){ 
//用戶沒(méi)有輸入內(nèi)容點(diǎn)擊的“確定” 
}else{ 
//點(diǎn)擊的是“取消” 
}

window.prompt點(diǎn)擊“確定”返回輸入框中的值，不輸入內(nèi)容點(diǎn)擊“確定”返回的是“”（前提是你在prompt時(shí)要加一個(gè)默認(rèn)的”“返回值，參考上面代碼），點(diǎn)擊“取消”返回的是null。