JavaScript 练手小技巧：HTML5 的 dialog 标签制作对话框

阿里云国内75折 回扣 微信号：monov8
阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6

对话框在应用中常常用来做信息提示、特定操作如登录、删除信息等。

一、传统对话框做法

以前创建对话框需要用<div> 标签去模拟或者使用一些框架、插件如 artDialog、boostrap 等去创建对话框。

如使用<div> 标签去模拟对话框

<style>
    .dialog{
        background: #fff;
        padding: 15px;
        position: fixed;
        z-index: 10000;
        left:50%;
        top:50%;
        transform: translateX(-50%) translateY(-50%);
        box-shadow: 0 0 20px 0 rgba(0,0,0,0.3);
        border-radius:15px;
    }
    div.mask{
        position: fixed;
        z-index: 9999;
        left:0;
        right:0;
        bottom:0;
        top:0;
        background: rgba(0,0,100,0.6);
    }
    .dialogBtn{
        text-align: center;
        padding-top: 15px;
    }
    .dialogBtn button{
        cursor: pointer;
        padding-left: 15px;
        padding-right: 15px;
        height: 30px;
        background: #3f74e3;
        color: #fff;
        font-size: 14px;
        text-shadow: 1px -1px 0 rgba(0,0,0,0.5);
        border:none;
        border-radius: 5px;
    }
    .dialogBtn button:hover{
        background: #1846a8;
    }
    .dialogContent{
        min-width: 300px;
        min-height:80px;
        font-size: 16px;
        line-height: 1.5;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>
<div class="dialog">
    <div class="dialogContent">
        <p>
            对话框的内容
        </p>
    </div>
    <div class="dialogBtn">
        <button type="button">确定</button>
    </div>
</div>
<div class="mask"></div>

 特定的功能还需要自己编写 JavaScript 代码详见博文《JavaScript练手小技巧页面遮罩层》JavaScript练手小技巧页面遮罩层_stones4zd的博客-CSDN博客_js遮罩层覆盖整个页面

二、dialog 标签

<dialog> 是HTML5新增的语义化双标签用于展示一个交互式的模态对话框。

它既可以创建模态化对话框带半透明背景遮罩层的对话框必须完成对话框操作后如单击【确定】或【取消】按钮等将该对话框关闭才能进行下一步操作。也可以创建非模态化对话框。

既可以使用键盘点击按钮关闭对话框也可以使用 esc键 关闭对话框。

  • 模态化对话框

  •  非模态化对话框

 

三、基础使用

1. 基础结构和样式

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

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

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

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

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

 <dialog> 标签基础样式

dialog {
    display: none;
    position: absolute;
    inset-inline-start: 0px;
    inset-inline-end: 0px;
    width: fit-content;
    height: fit-content;
    background-color: canvas;
    color: canvastext;
    margin: auto;
    border-width: initial;
    border-style: solid;
    border-color: initial;
    border-image: initial;
    padding: 1em;
}
dialog[open] {
    display: block;
}

注意几个细节

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

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

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

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

2. JS控制对话框的显示隐藏

<dialog> 标签常用方法

1show()

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

如点击按钮显示对话框。

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

 

2showModal()

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

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

模态化<diglog> 的样式

dialog:modal {
    position: fixed;
    inset-block-start: 0px;
    inset-block-end: 0px;
    max-width: calc((100% - 6px) - 2em);
    max-height: calc((100% - 6px) - 2em);
    user-select: text;
    visibility: visible;
    overflow: auto;
}

遮罩层是 <diglog> 的伪标签::backdrop。其默认样式为

dialog::backdrop {
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background: rgba(0, 0, 0, 0.1);
}

因此修改遮罩层就修改::backdrop的样式。

注意几个细节

  1. 模态化<dialog> 标签的样式是通过 dialog:modal 控制区别于普通状态的 <dialog> 。

  2. 模态化<dialog> 标签和遮罩层都是固定定位的。

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

    要垂直居中模态化<dialog> 标签可以使用以下样式。

.myDialog{
    top:50%;
    transform: translateY(-50%);
}

3close()

关闭对话框删除其open属性同时将close方法参数保留至dialog.returnValue属性上。

如以下代码会在第二次显示对话框的时候输出“abc”。

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

利用该方法可以给对话框添加自定义的“关闭”按钮。

<dialog class="myDialog" id="myDialog">
    <div class="myDialogClose" onclick="this.parentNode.close()">关闭</div>
    <h1>这个是对话框的内容</h1>
    <p>
        这是一个简单的对话框
    </p>
</dialog>
.myDialogClose{
    width: 40px;
    height: 40px;
    background: #f90;
    color: #fff;
    line-height: 40px;
    font-size: 12px;
    text-align: center;
    position: absolute;
    right:-20px;
    top:-20px;
    cursor: pointer;
}

 

3. 对话框事件

1close 事件

当对话框关闭时触发。

myDialog.addEventListener("close",function(e){  
   console.info(e.target);  // 输出对话框标签
});

2cancel 事件

当按下ESC关闭模态对话框时触发同时也会触发 close 事件。

myDialog.addEventListener("close",function(e){
    console.info(e.target);
});
myDialog.addEventListener("cancel",function(e){
    console.info("esc");
});

 注意顺序先 cancel 事件后 close 事件。

四、应用

1. 点击 dialog 关闭对话框

有时候我们需要点击遮罩层也属于<dialog> 标签的一部分就要关闭对话框。

但是点击对话框的内容也在点击<dialog> 标签。

因此要判断点击对象的 nodeName 是否是 dialog是就说明点击了遮罩层关闭对话框不是就是点击了<dialog> 标签里的内容不需要关闭对话框。

为了保证最佳点击效果强烈建议对话框的内容用一个div单独包裹而不是把内容直接堆在<dialog> 标签里。

<button type="button" id="btn">点击显示对话框</button>
<button type="button" id="btn2">点击删除对话框</button>
<dialog class="myDialog" id="myDialog">
    <div class="myDialogClose" id="closeDiv">关闭</div>
    <!-- 对话框内容 -->
    <div class="dialogContent">
        <h1>这个是对话框的内容</h1>
        <p>
            这是一个简单的对话框
        </p>
    </div>
    <!-- 对话框内容 end -->
</dialog>
myDialog.addEventListener("click",function(e){
    if(e.target.nodeName.toLowerCase() == "dialog"){
        myDialog.close();
    }
});

可以约定一个属性closeByMask若标签上存在该属性则可以进行点击遮罩层进行关闭

<dialog closeByMask></dialog>
<dialog closeByMask></dialog>

然后添加以下脚本即可

document.querySelectorAll("dialog[closeByMask]").forEach(dialog => {
    dialog.addEventListener("click",function(e){
        if(e.target.nodeName.toLowerCase() == "dialog") {
            this.close();
        }
    }
});

这样页面中所有的模态化对话框点击遮罩层都可以关闭。

2. dialog 跟表单结合

可以在 dialog 标签里添加表单增加按钮实现数据传递等。

<dialog class="myDialog" id="myDialog">
    <div class="myDialogClose" id="closeDiv">关闭</div>
    <!-- 对话框内容 -->
    <div class="dialogContent">
        <h1>这个是对话框的内容</h1>
        <p>
            这是一个简单的对话框
        </p>
        <div class="form">
            <form method="dialog">
                <button type="submit">确定</button>
                <button type="button">取消</button>
            </form>
        </div>
    </div>
    <!-- 对话框内容 end -->
</dialog>

 

注意

  1. 给 <form> 标签添加属性 method = "dialog"当点击submit 按钮的时候就会关闭对话框。

  2. 如果有多个 submit 按钮可以给按钮添加 value 属性。在 close 事件里利用returnValue 属性判断点击了哪个 submit按钮。从而可以选择执行不同的代码。

  3. 但是在执行完代码后记得清空 returnValue 的值否则会一直保留在 myDialog上。

<dialog class="myDialog" id="myDialog">
    <div class="myDialogClose" id="closeDiv">关闭</div>
    <!-- 对话框内容 -->
    <div class="dialogContent">
        <h1>这个是对话框的内容</h1>
        <p>
            这是一个简单的对话框
        </p>
        <div class="form">
            <form method="dialog">
                <button type="submit" value="ok">确定</button>
                <button type="submit" value="no">取消</button>
            </form>
        </div>
    </div>
    <!-- 对话框内容 end -->
</dialog>
myDialog.addEventListener("close",function(e){
    console.info("close");
    let rV = myDialog.returnValue;
    console.info( rV );
    if(rV =="ok"){
        console.info("你点了确定");
    }else if(rV =="no"){
        console.info("你点了取消");
    }else{
        console.info("其它操作");
    }
    myDialog.returnValue = ""; // 清空该值否则会一直保留到对话框上。
});

3. 隐藏显示添加动画

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

因此要修改为 opacity 属性来实现渐隐变化。

但是隐藏的时候 opacity:0 用户仍然可以点击<dialog> 标签。所以还要结合 visibility:hidden; 属性来让用户不能点击透明度为 0 的对话框标签。

dialog {
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
}
dialog[open] {
    display: block;
    opacity: 1;
    visibility: visible;
}

兼容性

目前主流浏览器都支持 <diglog> 标签可以放心使用。

 

阿里云国内75折 回扣 微信号：monov8
阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6
标签: JavaScriptHTML5Java
返回列表

上一篇：linux性能优化-内存原理

下一篇：37.JavaScript对象与JSON格式的转换，JSON.stringify、JSON.parse方法的使用方法和注意事项_js将对象转为json格式

“JavaScript 练手小技巧：HTML5 的 dialog 标签制作对话框” 的相关文章

12个爆款 Java 开源项目_java最新项目1年前 (2023-02-02)
Javaweb学生信息管理系统（Mysql+JSP+MVC+CSS）1年前 (2023-02-02)
30、JAVA进阶——Socket编程_socket编程java1年前 (2023-02-02)
Selenium入门（一）Java 搭建 Selenium 环境1年前 (2023-02-02)
【Java】一文秒懂http请求获取FlexManager平台FBox盒子信息1年前 (2023-02-02)
【Java AWT 图形界面编程】LayoutManager 布局管理器 ⑥ ( BoxLayout 布局 )1年前 (2023-02-02)
分享66个Java源码，总有一款适合您1年前 (2023-02-02)
Java环境安装、python环境安装、Burpsuite安装1年前 (2023-02-02)
Java工作流详解(附6大工作流框架对比)1年前 (2023-02-02)
【JavaEE】多线程（初阶）1年前 (2023-02-02)

阿里云国际版