数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学使用事件解释弹出消息
我们可以使用弹出框向应用用户显示弹出消息。在本教程中，我们将学习JavaScript中不同类型的弹出框。
JavaScript中共有三种不同类型的弹出框。
警告框
确认框
提示框
下面我们将逐一学习所有弹出框。
警告框
我们可以使用 `window.alert()` 方法显示警告框。它只是在弹出框中显示消息。
当我们需要向用户发送一些消息时，可以使用警告框。例如，当用户登录应用程序时，它会显示“您已成功登录”之类的消息。
语法
用户可以按照以下语法在JavaScript中显示警告框。
alert(message)
参数
message − 要在警告框中显示的消息。
示例
在这个例子中，当用户点击按钮时，我们调用 `showAlert()` 函数。`showAlert()` 函数使用 `alert()` 方法显示警告框。
在输出中，用户可以看到，当我们按下按钮时，它会显示带有作为参数传递的消息的警告框。当我们在警告框中按下“确定”按钮时，它会消失。
<html>
<body>
<h2> Showing the alert message using the <i> alert box. </i> </h2>
<button onclick = "showAlert()"> Show Alert Message </button>
</body>
<script>
// function to show alert
function showAlert() {
alert("This is the important message");
}
</script>
</html>
确认框
当我们需要用户的确认时，可以使用确认框。例如，在删除一些重要数据之前，我们需要用户的确认。
我们可以使用 `window.confirm()` 方法显示确认框。确认框包含两个按钮，分别包含文本“确定”和“取消”。如果用户按下“取消”按钮，则返回false；否则返回true。
语法
用户可以按照以下语法在JavaScript中显示确认框。
confirm(message);
参数
message − 要在确认框中显示的确认消息。
返回值
它根据用户按下“确定”还是“取消”按钮返回true和false布尔值。
示例
在这个例子中，我们使用了 `window` 对象的 `confirm()` 方法来显示确认框。此外，根据用户按下确认框的“确定”或“取消”按钮，我们还会在屏幕上向用户显示不同的消息。
<html>
<body>
<h2> Showing the confirm box using the <i> confirm() </i> method.</h2>
<p id = "output"> </p>
<button onclick = "showConfirm()"> Show Confirm box </button>
</body>
<script>
let message = "Kindly confirm once by pressing the ok or cancel button!";
// function to show confirm box
function showConfirm() {
// showing the confirm box with the message parameter
let returnValue = confirm(message);
let output = document.getElementById("output");
// According to the returned boolean value, show the output
if (returnValue) {
output.innerHTML += "You pressed the ok button.";
} else {
output.innerHTML += "You pressed the cancel button.";
}
}
</script>
</html>
提示框
提示框是JavaScript中显示弹出消息的第三种方法。提示框是 `alert()` 和确认框的增强版。它在框中显示消息并获取用户的输入。此外，它还包含“确定”和“取消”按钮来提交输入值。
语法
用户可以按照以下语法使用提示框在JavaScript中获取用户输入。
prompt(message, placeholder);
我们在上述语法中调用了静态 `prompt()` 方法。
参数
message − 要在输入框上方显示的消息。
Placeholder − 要在输入框中显示的文本。
返回值
如果用户按下“确定”按钮，它将返回输入值；否则返回null。
示例
在这个例子中，我们创建了 `takeInput()` 函数，该函数向用户显示提示框。我们使用提示框从用户处获取姓名输入。
当用户在输入值后按下“确定”按钮时，我们在屏幕上显示用户的输入。
<html>
<body>
<h2> Showing the prompt box using the <i> prompt() </i> method. </h2>
<p id = "output"> </p>
<button onclick = "takeInput()"> Show Prompt box </button>
</body>
<script>
let message = "Enter your name";
// function to take input using the prompt box
function takeInput() {
// showing the prompt with the message parameter
let returnValue = prompt(message, "Shubham");
let output = document.getElementById("output");
if (returnValue) {
output.innerHTML += "Your good name is " + returnValue;
} else {
output.innerHTML +=
"You pressed the cancel button, or you entered the null value";
}
}
</script>
</html>
在本教程中，我们学习了所有三种不同的弹出框以及示例。如果只需要显示消息，可以使用警告框；如果只需要用户的确认，则应使用确认框；如果需要弹出框中的输入值或带有某些值的确认，则应使用提示框。
748 次浏览
