H5对话框元素<dialog>

心安事随

发布于 2024-07-29 16:28:55

930

发布于 2024-07-29 16:28:55

文章被收录于专栏：前端大合集

对话框元素

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