用原生html与js写一个dialog

小丁冲鸭！

于 2021-01-06 14:54:35 发布

阅读量2k

点赞数 1

分类专栏：前端学习文章标签： javascript

本文链接：https://blog.youkuaiyun.com/DZY_12/article/details/112271687

版权

本文介绍了如何利用原生HTML、CSS和JavaScript实现一个对话框（Dialog）功能。通过提供的HTML结构、CSS样式以及JavaScript交互代码，实现了对话框的显示与隐藏效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现效果：

HTML代码：

<body>
    <button onclick="showDialog()">点击展示dialog</button>
    <dialog class="dialog">
        <div class="dialog-header">
            这是标题
            <div class="close-btn" onclick="closeDialog()"></div>
        </div>
        <div class="dialog-content">
            这里是内容
        </div>
    </dialog>
</body>

CSS代码：

.dialog {
        height: 400px;
        width: 600px;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        position: absolute;
        border: none;
        border-radius: 20px;
        padding: 0 20px;
    }
    .dialog-header {