极客教程JavaScript 有哪些类型的弹出框
在JavaScript中，弹出框用于向用户显示消息或通知。JavaScript中有三种类型的弹出框，即 Alert Box （警示框）、 Confirm Box （确认框）和 Prompt Box （提示框）。
Alert Box： 当需要生成警告消息时使用。当警示框显示给用户时，用户需要按下确定按钮才能继续。
语法：
alert("your Alert here")
示例：
<!DOCTYPE html>
<html>
<head>
<title>Pop-up Box type | Alert Box</title>
<style>
h1{
color:green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h3>Alert Box</h3>
<button onclick="geekAlert()">
Click here for alert box
</button>
<!-- Alert box function -->
<script>
function geekAlert() {
alert("An Online Computer Science"
+ "Portal for Geeks");
}
</script>
</center>
</body>
</html>
输出：
在按下按钮之前：
按下按钮后：
提示框： 这是一种弹出框，用于获取用户输入以供进一步使用。在输入所需的细节后，用户必须点击“确定”按钮以继续下一阶段，否则按下“取消”按钮用户会返回空值。
语法：
prompt("your Prompt here")
示例：
<!DOCTYPE html>
<html>
<head>
<title>
Pop-up Box type | Prompt Box
</title>
<style>
h1 {
color: green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h3>Prompt Box</h3>
<input type="button" onclick="geekPrompt();"
value="Click here for Prompt box"/>
<!-- Prompt box function -->
<script>
function geekPrompt() {
let x = prompt("Enter your mail here : ");
document.write("Your ID : " + x);
}
</script>
</center>
</body>
</html>
输出:
按下按钮之前:
按下按钮后：
确认框： 它是一种弹出框，用于从用户那里获得授权或许可。用户必须按下”确定”或”取消”按钮才能继续。
语法：
confirm("your query here")
示例：
<!DOCTYPE html>
<html>
<head>
<title>
Pop-up Box type | Confirm Box
</title>
<style>
h1 {
color: green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h3>Confirm Box</h3>
<button onclick="geekConfirm()">
Click here for Confirm box
</button>
<p id="geek"></p>
<!-- Confirm box function -->
<script>
function geekConfirm() {
var x;
if (confirm("Press a button!") == true) {
x = "OK pressed!";
} else {
x = "Cancel!";
}
document.getElementById("geek").innerHTML = x;
}
</script>
</center>
</body>
</html>
输出：
按下按钮之前：
按下按钮后：
