JavaScript 弹窗(对话框)警告框、确认框、提示框.

野性酷女 2022-06-08 02:57 474阅读 0赞

**JavaScript 弹窗(对话框)**  
  
三种消息框：警告框、确认框、提示框。  
  
**1. 警告框**  
警告框经常用于确保用户可以得到某些信息。  
当警告框出现后，用户需要点击确定按钮才能继续进行操作。  
语法：  
window.alert("text");  
text：提示语句  
  
**2. 确认框**  
确认框通常用于验证是否接受用户操作。  
当确认卡弹出时，用户可以点击 "确认" 或者 "取消" 来确定用户操作。  
当你点击 "确认", 确认框返回 true， 如果点击 "取消", 确认框返回 false。  
语法：  
window.confirm("text");  
text：提示语句  
  
**3.提示框**  
提示框经常用于提示用户在进入页面前输入某个值。  
当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。  
如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。  
语法  
window.prompt("text","defaultvalue");  
text：提示语句  
defaultvalue：文本框默认输入的字符，如果没有默认输入则不用传递。  
  
**4.换行**  
弹窗使用 反斜杠 + "n"(\\n) 来设置换行。  
alert("Hello\\nHow are you?");  
  
  
示例代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>对话框</title>
        <script type="text/javascript">
            //        方便测试每个对话框放在了一个方法里
            //        alert  警告框
            function showAlert() {
                alert("警告框");
            }
            //confirm 确认框
            function showConfirm() {
                window.confirm("确认框？")
            }
            //        prompt  提示框
            //        输入一个数如果是1024则提示正确。否则重新输入
            function showPrompt() {
                var prompt = window.prompt("输入一个数：");
                if (prompt) {
                    if (prompt == 1024) {
                        alert("正确...");
                    } else {
                        alert("输入有误重新输入");
                        showPrompt();//递归调用自己
                    }
                } else {
                    showPrompt();//递归调用自己
                }
            }
    
            showAlert();
            showConfirm();
            showPrompt();
        </script>
    </head>
    <body>
    
    </body>
    </html>

注：alert(),confirm(),prompt()方法可以不带上window对象，直接使用prompt()方法。