JavaScript弹窗详解-优快云博客

本文链接：https://blog.youkuaiyun.com/aihiao/article/details/109654612

1. JavaScript有三种类型的弹出框: 警告框、确认框和提示框。

2. 警告框

2.1. 如果要确保信息传递给用户, 通常会使用警告框。

2.2. 当警告框弹出时, 用户将需要单击"确定"来继续。

2.3. 语法

window.alert("sometext");

2.4. window.alert()方法可以不带window前缀来写。

alert("我是一个警告框！");

3. 确认框

3.1. 如果您希望用户验证或接受某个东西, 则通常使用"确认"框。

3.2. 当确认框弹出时, 用户将不得不单击"确定"或"取消"来继续进行。

3.3. 如果用户单击"确定", 该框返回true。如果用户单击"取消", 该框返回false。

3.4. 语法

window.confirm("sometext");

3.5. window.confirm()方法可以不带window前缀来编写。

var r = confirm("请按按钮");
if (r == true) {
    x = "您按了确认！";
} else {
    x = "您按了取消！";
}

4. 提示框

4.1. 如果您希望用户在进入页面前输入值, 通常会使用提示框。

4.2. 当提示框弹出时, 用户将不得不输入值后单击"确定"或点击"取消"来继续进行。

4.3. 如果用户单击"确定", 该框返回输入值。如果用户单击"取消", 该框返回NULL。

4.4. 语法

window.prompt("sometext","defaultText");

4.5. window.prompt()方法可以不带window前缀来编写。

var person = prompt("请输入您的姓名", "zhangsan");
if (person != null) {
    document.getElementById("demo").innerHTML = "你好 " + person + "！今天过的怎么样?";
}

5. 例子

5.1. 代码

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<title>弹出框</title>
	</head>
	<body>
		<input type="button" value="警告框" onclick="myAlert()" />
		<input type="button" value="确认框" onclick="myConfirm()" />
		<input type="button" value="提示框" onclick="myPrompt()" />

		<script type="text/javascript">
			function myAlert() {
    			window.alert("我是警告框");
 			}

 			function myConfirm() {
    			window.confirm("我是确认框");
 			}
 			function myPrompt() {
    			window.prompt("请输入您的姓名", '张三');
 			}
		</script>
	</body>
</html>

5.2. 效果图

078_弹出框