JavaScript 事件说明弹出消息

JavaScript 提供了各种弹出框，用于警示、提示用户或获取用户输入。弹出框会阻止用户访问程序的某些功能，直到弹出框关闭，因此不应滥用弹出框。JavaScript 中有三种不同类型的弹出方法 – 警示框、确认框和提示框。

1. 警示框： 警示（Alert）对话框最常用于通过在一个小对话框中显示特定消息来警示或提示用户。

示例： 下面的示例演示了如何使用警示框：

JavaScript

<!DOCTYPE html> 
<html> 
   
<head> 
    <script> 
        function showAlert() { 
            alert("Displaying an Alert box"); 
        } 
    </script> 
</head> 
  
<body> 
    <button onclick="showAlert()"> 
        Display Alert Box 
    </button> 
</body> 
   
</html>

输出：

JavaScript 事件说明弹出消息

2. 确认框：

确认框用于允许用户进行选择。当Javascript显示一个复选框时，用户需要点击“确定”或“取消”来进行下一步操作。当用户点击确定按钮时，变量result将获得true值，当用户点击取消按钮时，变量result将获得false值。此外，根据用户点击的内容，我们可以执行不同的操作。我们可以使用条件语句来解释这个行为。

示例：

下面的示例演示了如何使用确认框：

Javascript

<!DOCTYPE html> 
<html> 
  
<head> 
    <script type="text/javascript"> 
        function isConfirmed() { 
            let conVal = 
                confirm("Are you ready to confirm?"); 
            if (conVal == true) { 
                document.getElementById("result") 
                    .innerHTML = "Confirmed !"; 
            } else { 
                document.getElementById("result") 
                    .innerHTML = "Cancelled !"; 
            } 
        } 
    </script> 
</head> 
  
<body> 
    <form> 
        <input type="button" onclick="isConfirmed()" 
            value="Confirmation check" /> 
    </form> 
  
    <p id="result"></p> 
</body> 
  
</html>

输出:

JavaScript 事件说明弹出消息

3. 提示框： JS 提示框可以用于获取用户输入。当 JS 显示提示框时，用户将看到一个弹出框，其中有一个输入位置和“确定”或“取消”按钮，在输入完值后继续操作。

示例： 下面的示例演示了如何使用提示框：

Javascript

<!DOCTYPE html> 
<html> 
  
<head> 
    <script type="text/javascript"> 
        function promptUser() { 
            let userInput = 
                prompt("Hi Dude, What is your name?", 
                    "John Wick"); 
            if (userInput != null) { 
                document.getElementById("result"). 
                    innerHTML = "Hello " + userInput + 
                    ",Thanks for Contributing to GFG"; 
            } 
        } 
    </script> 
</head> 
  
<body> 
    <button onclick="promptUser()"> 
        Click here for prompt</button> 
    <p id="result"></p> 
</body> 
  
</html>

输出：

JavaScript 事件说明弹出消息

弹出框的用途：

JavaScript警告框可用于显示任何错误消息和帮助消息。例如，如果执行表单字段验证，发现某些位置输入不正确，可以显示一个警告框，并向用户通知输入不正确的消息。
JavaScript确认框是验证任何重要用户操作的好方式，例如，如果我们的Web应用程序中有一个功能，当我们点击一个按钮时，会向服务器发出一个AJAX请求来删除网站上的某些数据，在这种情况下，最好在点击按钮后确认一次，以便在请求错误时可以再次确认或取消请求。所以对于重要的操作，我们应该使用一个确认弹出框。
JavaScript提示框可用于创建一个类似系统菜单的功能，在用户输入后使用JavaScript转换语句执行各种操作。