html dialog

作者：躲藏我的霸气发布日期:2025-10-12 浏览:54

<!-- HTML <dialog> 示例代码 -->

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Dialog 示例</title>
    <style>
        /* 简单样式，使对话框居中 */
        dialog {
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 20px;
            width: 300px;
        }
    </style>
</head>
<body>

<button id="openDialogBtn">打开对话框</button>
<dialog id="myDialog">
    <p>这是一个 HTML 对话框。</p>
    <button id="closeDialogBtn">关闭</button>
</dialog>

<script>
    // 获取元素
    const openDialogBtn = document.getElementById('openDialogBtn');
    const closeDialogBtn = document.getElementById('closeDialogBtn');
    const myDialog = document.getElementById('myDialog');

    // 打开对话框
    openDialogBtn.addEventListener('click', () => {
        myDialog.showModal(); // 显示对话框
    });

    // 关闭对话框
    closeDialogBtn.addEventListener('click', () => {
        myDialog.close(); // 关闭对话框
    });
</script>

</body>
</html>

解释说明：

HTML <dialog> 元素：<dialog> 是一个用于创建对话框或模态窗口的 HTML 元素。它可以通过 JavaScript 控制显示和隐藏。
showModal() 方法：该方法用于显示对话框，并在对话框显示时阻止用户与页面其他部分进行交互（即模态效果）。
close() 方法：该方法用于关闭对话框。
按钮控制：通过两个按钮分别控制对话框的打开和关闭。点击“打开对话框”按钮会调用 showModal() 方法显示对话框，点击“关闭”按钮会调用 close() 方法关闭对话框。
样式：简单的 CSS 样式用于美化对话框，使其居中并添加一些边框和内边距。

上一篇：html代码是什么

下一篇：html的中文