用原生html与js写一个dialog

最新推荐文章于 2024-04-28 17:05:59 发布

小丁冲鸭！

最新推荐文章于 2024-04-28 17:05:59 发布

阅读量1.8k

点赞数 1

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

本文链接：https://blog.csdn.net/DZY_12/article/details/112271687

版权

实现效果：

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%);

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小丁冲鸭！

关注关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
用原生html与js写一个dialog

实现效果：HTML代码：<body> <button onclick="showDialog()">点击展示dialog</button> <dialog class="dialog"> <div class="dialog-header"> 这是标题 <div class="close-btn" onclick="closeDialog()"&gt
复制链接

扫一扫