JS弹框|极客笔记

JS弹框

在网页开发中，弹框是非常常见的交互组件，用于在页面中显示一些消息、警告、确认信息或者输入框等。在JavaScript中，我们可以通过一些内置方法来实现不同类型的弹框，例如alert、confirm和prompt等。本文将详细介绍这些弹框方法的用法和示例。

alert方法

alert方法用于显示一个包含消息和一个确认按钮的对话框。当用户点击确认按钮时，对话框将会关闭。该方法的语法如下：

alert(message);

其中，message为要在对话框中显示的文本消息。下面是一个简单的示例：

alert("Hello, World!");

运行以上代码后，页面上会弹出一个对话框，显示消息”Hello, World!”。

confirm方法

confirm方法用于显示一个包含消息、确认和取消按钮的对话框。当用户点击确认按钮时，confirm方法会返回true；当用户点击取消按钮时，confirm方法会返回false。其语法如下：

confirm(message);

以下是一个示例：

if (confirm("Are you sure?")) {
    console.log("User clicked OK");
} else {
    console.log("User clicked Cancel");
}

当用户点击确认按钮时，控制台会输出”User clicked OK”；当用户点击取消按钮时，控制台会输出”User clicked Cancel”。

prompt方法

prompt方法用于显示一个包含消息、文本输入框和确认、取消按钮的对话框。用户可以在输入框中输入文本，并点击确认或取消按钮。如果用户点击确认按钮且输入了文本，则prompt方法返回用户输入的文本；如果用户点击取消按钮或者输入为空，则返回null。其语法如下：

prompt(message, defaultText);

其中，message为要显示的文本消息，defaultText为输入框中的默认文本。以下是一个示例：

let name = prompt("Please enter your name:", "Alice");

if (name != null) {
    console.log("Hello, " + name);
} else {
    console.log("User cancelled the prompt");
}

当用户输入了文本并点击确认按钮时，控制台会输出”Hello, 用户输入的文本”；当用户点击取消按钮或者不输入文本时，控制台会输出”User cancelled the 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 Modal</title>
<style>
.modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 9999;
}
</style>
</head>
<body>

<button onclick="openModal()">Open Modal</button>

<div id="modal" class="modal">
    <span onclick="closeModal()" style="float: right; cursor: pointer;">×</span>
    <h2>Modal Title</h2>
    <p>This is a custom modal dialog.</p>
</div>

<script>
function openModal() {
    document.getElementById("modal").style.display = "block";
}

function closeModal() {
    document.getElementById("modal").style.display = "none";
}
</script>

</body>
</html>

在以上示例中，当用户点击按钮”Open Modal”时，会显示一个自定义的模态框；用户点击模态框右上角的”×”或者模态框外部区域时，模态框会关闭。