主页 » Web API » JavaScript 对话框 API

JavaScript 对话框 API

摘要：在本教程中，您将学习如何使用原生 <dialog> 元素和 JavaScript 对话框 API 创建对话框。

JavaScript 对话框 API 简介

在 HTML5 中，您可以使用 <dialog> 元素来创建一个模态或非模态对话框。原生 <dialog> 元素包含对背景的支持以及用于控制其可见性的方法。

要创建一个新的对话框元素，您可以使用以下 <dialog> 标签：

<dialog>
</dialog>Code language: HTML, XML (xml)

在开始 <dialog> 和结束 </dialog> 标签之间，您可以放置内容。通常，它包括一个用于关闭对话框的按钮。

<dialog>
<button type="button">Close</button>
</dialog>Code language: HTML, XML (xml)

<dialog> 元素的类型为 HTMLDialogElement，它 继承 自 HTMLElement 接口。

HTMLDialogElement 提供以下方法来控制对话框的可见性：

方法描述
show()显示一个模态对话框，允许您与对话框外部的元素进行交互。
showModal()显示一个模态对话框，阻止您与对话框外部的元素进行交互。
close()关闭对话框。

JavaScript 对话框 API 示例

让我们来看一些使用 JavaScript 对话框 API 的示例。

1) 创建一个简单的对话框示例

以下页面使用 <dialog> 元素来创建一个带有消息的简单对话框。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JavaScript Dialog API</title>
    </head>
    <body>
        <dialog id="myDialog" open>
            <p>This is a simple dialog.</p>
        </dialog>
    </body>
</html>Code language: HTML, XML (xml)

在这个例子中，<dialog> 元素包含 open 属性，当页面加载时会自动显示。

2) 使用 JavaScript 对话框 API 来控制对话框的可见性

以下示例显示了如何使用 JavaScript 对话框 API 来控制对话框的可见性

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JavaScript Dialog API</title>
    </head>
    <body>
        <dialog id="myDialog">
            <p>This is a dialog.</p>
            <button id="closeDialog">Close</button>
        </dialog>

        <button type="button" id="openDialog">Open Dialog</button>

        <script>
            const btnOpen = document.querySelector('#openDialog');
            const btnClose = document.querySelector('#closeDialog');
            const dialog = document.querySelector('#myDialog');

            btnOpen.addEventListener('click', () => {
                dialog.showModal();
            });

            btnClose.addEventListener('click', () => {
                dialog.close();
            });
        </script>

    </body>

</html>Code language: HTML, XML (xml)

工作原理。

首先，声明 <dialog> 元素，其 id 为 myDialog

<dialog id="myDialog">
   <p>This is a dialog.</p>
   <button id="closeDialog">Close</button>
</dialog>Code language: HTML, XML (xml)

在 <dialog> 元素中，我们有一个 id 为 closeDialog 的按钮。当它被点击时，对话框就会关闭。

第二，声明 <button> 元素，其 id 为 openDialog。当它被点击时，对话框就会打开。

<button type="button" id="openDialog">Open Dialog</button>Code language: HTML, XML (xml)

第三，使用 querySelector() 方法选择打开按钮、对话框元素和关闭按钮。

const btnOpen = document.querySelector('#openDialog');
const dialog = document.querySelector('#myDialog');
const btnClose = document.querySelector('#closeDialog');Code language: JavaScript (javascript)

第四，当打开按钮被点击时，通过在打开按钮的点击处理程序中调用对话框元素的 showModal() 方法来显示对话框。

btnOpen.addEventListener('click', () => {
    dialog.showModal();
});Code language: JavaScript (javascript)

第五，当关闭按钮被点击时，通过在关闭按钮的点击处理程序中调用对话框元素的 close() 方法来关闭对话框。

btnClose.addEventListener('click', () => {
    dialog.close();
});Code language: JavaScript (javascript)

3) 在对话框中使用表单

如果在对话框中使用 表单，您可以将表单的 method 属性设置为 dialog。这将导致在您提交表单时对话框关闭。

但是，表单数据不会被提交到服务器。相反，它被保存到浏览器中。如果您重新打开同一个对话框，表单字段将被填充保存的数据。

以下是一个示例：

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="robots" content="noindex">
        <title>JavaScript Dialog Form</title>
    </head>

    <body>
        <dialog id="subscribeDialog">
            <form method="dialog">
                <p>
                    <label for="name">Name:</label>
                    <input type="text" name="name" id="name">
                </p>
                <p>
                    <label for="email">Email:</label>
                    <input type="email" name="email" id="email">
                </p>

                <button type="submit" id="btnOk">Subscribe</button>
            </form>
        </dialog>
        <button type="button" id="btnOpenDialog">Open Dialog</button>

        <script>
            const dialog = document.querySelector('#subscribeDialog');
            const btnOpenDialog = document.querySelector('#btnOpenDialog');
            btnOpenDialog.addEventListener('click', (event) => {
                dialog.showModal();
            });
        </script>
    </body>

</html>Code language: HTML, XML (xml)

当您点击打开对话框按钮时，对话框将显示。在输入您的姓名和电子邮件并点击订阅按钮后，对话框将消失。

如果您再次点击打开对话框按钮以打开相同的对话框，您将看到姓名和电子邮件字段仍然填充着之前输入的数据。

此外，当对话框显示时，第一个输入元素 (name) 会自动获得焦点。这是一个对话框默认提供的很棒的辅助功能。

如果您想在不提交表单的情况下关闭对话框，可以在提交按钮中添加 formmethod="dialog" 属性。

例如，您可以在对话框的表单中添加一个取消按钮，该按钮在不提交表单数据的情况下关闭表单。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="robots" content="noindex">
        <title>JavaScript Dialog Form</title>
    </head>

    <body>
        <dialog id="subscribeDialog">
            <form method="dialog">
                <p>
                    <label for="name">Name:</label>
                    <input type="text" name="name" id="name">
                </p>
                <p>
                    <label for="email">Email:</label>
                    <input type="email" name="email" id="email">
                </p>

                <button type="submit" id="btnOk">Subscribe</button>
                <button type="submit" formmethod="dialog">Cancel</button>
            </form>
        </dialog>
        <button type="button" id="btnOpenDialog">Open Dialog</button>

        <script>
            const dialog = document.querySelector('#subscribeDialog');
            const btnOpenDialog = document.querySelector('#btnOpenDialog');
            btnOpenDialog.addEventListener('click', (event) => {
                dialog.showModal();
            });
        </script>
    </body>

</html>Code language: HTML, XML (xml)

点击外部时关闭对话框

当您点击对话框外部时，它不会关闭。要关闭它，您可以监听对话框元素的点击事件，如果点击对话框外部则关闭它。

dialog.addEventListener("click", (event) => {
    const rect = dialog.getBoundingClientRect()
    if (event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom) {
        dialog.close()
    }
})Code language: JavaScript (javascript)

例如

总结

  • 使用原生 HTML5 <dialog> 元素来创建一个模态对话框。
  • 对话框可以是模态的或非模态的。模态对话框会阻止与页面其他部分的交互，而非模态对话框不会阻止交互。
  • 使用 show() 方法显示一个非模态对话框。
  • 使用 showModal() 方法显示一个模态对话框。
  • 使用 close() 方法关闭对话框。
  • 当对话框关闭时，对话框元素会触发 close 事件，当对话框取消时，例如通过按下 Escape 键，会触发 cancel 事件。
本教程是否有帮助？
JavaScript FormData
上一个
JavaScript FormData
下一个
JavaScript 气泡 API
JavaScript Popover API