H5对话框元素<dialog> 讲解

2024-08-11 40

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 元素定义对话框或窗口，如点击按钮弹出的对话框、警告提示等。通过 `open` 属性控制可见性，`showModal()` 方法展示模态框。支持基本样式调整，如背景颜色和边框。兼容性详情参见 MDN 文档。

对话框元素

<dialog> HTML元素用来表示对话框或者其他交互式组件

使用场景:点击按钮弹出对话框;警告提示信息框; 定义一个对话框、确认框或窗口...

方法:

Dialog 对象属性

属性	描述
open	设置或者返回对话窗口是否打开
returnValue	设置或者返回 dialog 的返回值

对话框默认是隐藏的,需要加上在<dialog>加上open属性

<dialog open></dialog>

Dialog 对象方法

方法	描述
close()	关闭对话窗口
show()	显示的对话框
showModal()	显示对话框，并使其成为最顶层的对话框

通过 showModel()方法来展示模态框

具体代码小demo演示:

HTML部分

<button class="btn show">显示对话框</button>
    <dialog>
        <p>我是一段测试文字用来占位置</p>
        <form method="dialog">
            <button class="btn ok" value="Yes">Yes</button>
            <button class="btn close" value="No">No</button>
        </form>
    </dialog>

CSS部分

 body {
   
   

            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        dialog {
   
   
            width: 400px;
            height: 200px;
            border-radius: 20px;
            background-color: #62656e;
        }
        /* 修改模态框的背景样式*/
        dialog::backdrop {
   
   
            background-color: rgba(0, 0, 0, 0.6);
        }

        dialog p {
   
   
            color: aliceblue;
            text-align: center;
        }

        .btn {
   
   
            display: block;
            margin: 0 auto;
            width: 150px;
            height: 50px;
            background-color: black;
            cursor: pointer;
            font-size: 16px;
            color: aliceblue;
            border-radius: 10px;
        }

        form {
   
   
            margin-top: 80px;
            display: flex;
        }

JS部分

         //1.获取dialog 元素
        let dialog = document.querySelector('dialog')
        let show = document.querySelector('.show')
        // 2.给按钮添加点击事件  点击之后
        show.addEventListener('click', () => {
   
   
        // 调用dialog身上的方法showModal() 来显示模态框
            dialog.showModal()
        })

        dialog.addEventListener('close', () => {
   
   
        // 点击确认和取消按钮 返回指定的值,这里用的close事件
            console.log(dialog.returnValue);
        })