JS弹出框|极客笔记

JS弹出框

在网页开发中，弹出框是一种常见的交互方式，可以用来展示提示信息、确认操作或者实现互动功能。JavaScript提供了多种方式来实现弹出框，比如alert()、confirm()和prompt()等方法。本文将详细介绍各种弹出框的使用方法和效果。

alert()方法

alert()方法用于显示一个包含指定文本的警告框。在调用alert()方法时，浏览器会弹出一个模态对话框，禁止用户继续操作页面，直到用户点击确定按钮或关闭对话框。警告框通常用于向用户展示重要信息或提示。

语法

alert(message);

message：要在弹出框中显示的文本内容，可以是字符串或其他JavaScript表达式。

示例

alert("Hello, world!");

运行效果

用户调用alert("Hello, world!")方法后，会弹出一个警告框，内容为”Hello, world!”，如下图所示：

[警告] Hello, world!
[确定]

confirm()方法

confirm()方法用于显示一个包含指定文本和确认按钮的对话框。对话框中包含”确定”和”取消”两个按钮，用户可以点击任一按钮以确认或取消操作。确认框通常用于用户确认某个操作或决定是否执行某个动作。

语法

confirm(message);

message：要在对话框中显示的文本内容，可以是字符串或其他JavaScript表达式。

示例

if (confirm("Are you sure you want to delete this item?")) {
    console.log("Item deleted");
} else {
    console.log("Deletion canceled");
}

运行效果

用户调用confirm("Are you sure you want to delete this item?")方法后，会弹出一个包含确认按钮和取消按钮的对话框，内容为”Are you sure you want to delete this item?”，如下图所示：

[确认] [取消]

如果用户点击”确认”按钮，则打印”Item deleted”信息；如果用户点击”取消”按钮，则打印”Deletion canceled”信息。

prompt()方法

prompt()方法用于显示一个包含输入框、确认按钮和取消按钮的对话框。用户可以在输入框中输入文本，然后点击确认按钮以提交输入的内容。输入框通常用于要求用户输入一些信息或数据。

语法

prompt(message, defaultText);

message：要在对话框中显示的文本内容，可以是字符串或其他JavaScript表达式。
defaultText：输入框中默认显示的文本，可以是字符串或其他JavaScript表达式。

示例

let name = prompt("Please enter your name:", "John Doe");
if (name !== null) {
    console.log("Hello, " + name + "!");
}

运行效果

用户调用prompt("Please enter your name:", "John Doe")方法后，会弹出一个包含输入框、确认按钮和取消按钮的对话框，输入框中默认显示”John Doe”，如下图所示：

[确认] [取消]

如果用户在输入框中输入”Jane”并点击”确认”按钮，则打印”Hello, Jane!”信息；如果用户点击”取消”按钮，则prompt()方法返回null。

自定义弹出框

除了使用alert()、confirm()和prompt()方法外，还可以通过HTML、CSS和JavaScript代码自定义弹出框样式和功能。这种方式可以实现更灵活的弹出框效果，满足特定的设计需求。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Dialog</title>
    <style>
        .dialog {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 20px;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
        }
    </style>
</head>
<body>
    <div class="overlay" style="display: none;"></div>
    <div class="dialog" style="display: none;">
        <p>This is a custom dialog box.</p>
        <button id="okButton">OK</button>
        <button id="cancelButton">Cancel</button>
    </div>
    <script>
        const overlay = document.querySelector(".overlay");
        const dialog = document.querySelector(".dialog");
        const okButton = document.getElementById("okButton");
        const cancelButton = document.getElementById("cancelButton");

        function showDialog() {
            overlay.style.display = "block";
            dialog.style.display = "block";
        }

        function hideDialog() {
            overlay.style.display = "none";
            dialog.style.display = "none";
        }

        okButton.addEventListener("click", function() {
            console.log("OK button clicked");
            hideDialog();
        });

        cancelButton.addEventListener("click", function() {
            console.log("Cancel button clicked");
            hideDialog();
        });

        showDialog();
    </script>
</body>
</html>