HTML5 <dialog> 标签

袁志蒙 769次浏览

摘要:dialog 是HTML5新增的语义化双标签,用于展示一个交互式的模态对话框。它既可以创建模态对话框(用户不能与打开对话框的页面进行交互,直到对话框关闭,模态对话带半透明背景...

dialogHTML5新增的语义化双标签,用于展示一个交互式的模态对话框。

它既可以创建模态对话框(用户不能与打开对话框的页面进行交互,直到对话框关闭,模态对话带半透明背景遮罩层的对话框,也可以使用 esc键 关闭对话框),也可以创建非模态对话框(用户可以与打开对话框的页面进行交互,同时也可以与对话框进行交互,只能点击按钮关闭对话框,不能使用 esc键 关闭对话框)。

HTML<dialog>标签

一、 基础结构

<dialog> 是双标签,可以在它的头尾标签之间自定义对话框内容。如:

<dialog>
    <h1>这个是对话框的内容</h1>
    <p>
        这是一个简单的对话框
    </p>
</dialog>


默认<dialogo> 标签是不可见的。

要显示对话框,需要添加 open 属性。

<dialog open>
    <h1>这个是对话框的内容</h1>
    <p>
        这是一个简单的对话框
    </p>
</dialog>


注意几个细节:

<dialog> 标签的显示与隐藏是通过 display:block/none; 进行操作的。意味着 <dialog> 标签默认不能进行透明度渐隐变化。

<dialog> 标签默认是绝对定位的。

<dialog> 标签自带有 1em 的 padding 值。

<dialog> 标签是通过设置 margin:auto 实现的水平居中。

二、JS控制对话框的显示隐藏

1. show()

非模态化显示对话框,对其添加open属性。在非模态化下,不能使用 esc 键让对话框消失。

如:点击按钮,显示对话框。

let btn = document.getElementById("btn");
let myDialog = document.querySelector("#myDialog"); // 获取对话框标签
btn.addEventListener("click",function (e) {
    myDialog.show();
});

2.showModal()

模态化显示对话框,对其添加open属性并且显示遮罩层,同时按ESC键可以关闭对话框。

let btn = document.getElementById("btn");
let myDialog = document.querySelector("#myDialog"); // 获取对话框标签
btn.addEventListener("click",function (e) {
    myDialog.showModal();
});

3.close()

关闭对话框

let myDialog = document.querySelector("#myDialog"); // 获取对话框标签
myDialog.close();


三、CSS样式控制

/** 非模态化样式 **/
dialog {
	position: fixed;
	top: 50%;
	left: 50%;
	height: 200px;
	width: 400px;
	margin-top:-100px;
	margin-left:-200px;
	border: 1px solid #ddd;
	border-radius: 2px;
	padding: 10px;
	box-shadow:1px 1px 50px rgba(0,0,0,.3)
}

/** 模态化样式 **/
dialog:modal {
	padding: 15px;
    max-width: calc((100% - 6px) - 2em);
    max-height: calc((100% - 6px) - 2em);
	border-radius: 2px;
	border:1px solid #ddd;
	box-shadow:1px 1px 50px rgba(0,0,0,.3)
}
/** 模态化 遮罩层样式 **/
dialog::backdrop {
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background: rgba(0, 0, 0, 0.3);
}

四、综合案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>dialog弹窗</title>
        <style>
            dialog:modal {
                padding: 15px;
                max-width: calc((100% - 6px) - 2em);
                max-height: calc((100% - 6px) - 2em);
                border-radius: 2px;
                border: 1px solid #ddd;
                box-shadow: 1px 1px 50px rgba(0, 0, 0, .3)
            }
            dialog::backdrop {
                position: fixed;
                top: 0px;
                right: 0px;
                bottom: 0px;
                left: 0px;
                background: rgba(0, 0, 0, 0.3);
            }
        </style>
    </head>
    <body>

        <!-- 弹框 -->
        <dialog closeByMask id="dialog">
            <p>调查问卷</p>
            <form action="" onsubmit="return submitForm(this)">
                <div>
                    姓名:<input type="text" name="name">
                </div>
                <div>
                    年龄:<input type="text" name="age">
                </div>
                <div>
                    <input type="submit" value="确定">
                    <button type="button" id="btn-close">关闭</button>
                </div>
            </form>
        </dialog>

        <button id="btn-open">打开对话</button>

        <script>
            var btnOpen = document.querySelector("#btn-open");
            var btnClose = document.querySelector("#btn-close");
            var dialog = document.querySelector("#dialog");

            // 打开弹窗
            btnOpen.addEventListener("click", function() {
                // dialog.show();  // 非模态弹窗
                dialog.showModal();  // 模态弹窗
            });

            // 关闭弹窗
            btnClose.addEventListener("click", function() {
                dialog.close();
            });

            // 表单提交
            function submitForm(obj) {
                console.log('姓名:', obj.name.value);
                console.log('年龄:', obj.age.value);
                dialog.close();
                return false;
            }

            // 点击遮罩层关闭弹窗(如不需要点击遮罩层关闭,可以删除)
            function closeDialog(event) {
                if (event.target === dialog) {
                    dialog.close();
                }
            }
            // 点击遮罩层关闭弹窗(如不需要点击遮罩层关闭,可以删除)
            dialog.addEventListener("click", closeDialog);
        </script>


    </body>
</html>


随机内容

表情

共0条评论
  • 这篇文章还没有收到评论,赶紧来抢沙发吧~