首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >H5对话框元素<dialog>

H5对话框元素<dialog>

作者头像
心安事随
发布于 2024-07-29 08:28:55
发布于 2024-07-29 08:28:55
17400
代码可运行
举报
文章被收录于专栏:前端大合集前端大合集
运行总次数:0
代码可运行

对话框元素

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

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

方法:

Dialog 对象属性

属性

描述

open

设置或者返回对话窗口是否打开

returnValue

设置或者返回 dialog 的返回值

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<dialog open></dialog>
Dialog 对象方法

方法

描述

close()

关闭对话窗口

show()

显示的对话框

showModal()

显示对话框,并使其成为最顶层的对话框

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

具体代码小demo演示:

HTML部分

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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部分

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 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部分

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
        //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);
       })

兼容性请看这里: 对话框元素 - HTML(超文本标记语言) | MDN (mozilla.org)

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2024-07-29,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
教你使用HTML5原生对话框元素,轻松创建模态框组件
以前,如果我们想要构建任何形式的模式对话框或对话框,我们需要有一个背景,一个关闭按钮,将事件绑定在对话框中的方式安排我们的标记,找到一种将消息传递出去的方式对话......这真的很复杂。对话框元素解决了上述所有问题。
用户6167509
2019/09/04
5.5K0
教你使用HTML5原生对话框元素,轻松创建模态框组件
使用新H5标签<dialog>,实现点击按钮显示分享链接弹出层交互功能
在现代网页开发中,使用新技术和标签来提升用户体验是非常重要的。今天,我们就来聊聊如何利用HTML5的<dialog>标签来实现一个简洁实用的分享链接功能。
前端达人
2024/06/26
9130
使用新H5标签<dialog>,实现点击按钮显示分享链接弹出层交互功能
【CodeBuddy】三分钟开发一个实用小功能之:爆炸式模态框弹出
我正在参加CodeBuddy「首席试玩官」内容创作大赛,本文所使用的 CodeBuddy 免费下载链接: 腾讯云代码助手 CodeBuddy - AI 时代的智能编程伙伴
Jimaks
2025/05/23
1340
【CodeBuddy】三分钟开发一个实用小功能之:爆炸式模态框弹出
第126天:移动端-原生实现响应式模态框
下面采用HTML+CSS+JavaScript实现模态框,并采用Flex布局和多媒体查询实现响应式。
半指温柔乐
2018/09/11
1.4K0
第126天:移动端-原生实现响应式模态框
原生JS实现软件卸载对话框(超有趣)
今天给大家分享一个特别有意思的软件卸载对话框,鼠标在整个对话框里移动时,中间的人脸会作出不同的变化,当鼠标悬停到“保留”按钮上时,人脸的表情会变得开心,当鼠标悬停到“卸载”按钮上面时,人脸的表情会变得不开心。
越陌度阡
2020/11/26
4.4K0
原生JS实现软件卸载对话框(超有趣)
4.HTML样式布局区块标签元素介绍
本章节,主要介绍HTML布局与区块的元素介绍, 比如头部,中部,尾部以及行内区块与行外区块等,具体讲解如下述所示。
全栈工程师修炼指南
2023/03/21
1.5K0
4.HTML样式布局区块标签元素介绍
React 模态框 Modal 组件详解
模态框(Modal)是一种常见的 UI 元素,用于显示重要信息或请求用户输入。在 React 中,实现一个功能完善的模态框组件并不复杂,但也有许多细节需要注意。本文将从基础概念出发,逐步深入到 React 模态框组件的实现,包括常见问题、易错点及如何避免,并提供代码案例解释。
Jimaks
2024/11/11
5780
低代码时代的开发加速器
“写代码”这件事变得不再是前端工程师的专属任务。尤其是在低代码平台的推动下,越来越多非技术背景的业务人员也能直接参与产品界面搭建。而其中最具代表性的生产力工具,非
不惑
2025/06/27
1150
低代码时代的开发加速器
腾讯云COS MCP Server + CodeBuddy ,让你的idea 不止停留在想象中...
最近在一次上班过程中听到了产品经理的抱怨,后来一时兴起就给产品经理写了一篇基于腾讯云CodeBuddy 和 EdgeOne Pages MCP Server帮助产品经理快速落地原型图的示例,给产品经理看后,产品经理表示很满意,在实现上没什么技术上的门槛,效果上远比其自身苦哈哈画两天原型图的效果要好很多,最重要是这个还很快,两句话搞定原型图。
六月的雨在Tencent
2025/05/18
7991
JavaScript案例:弹出登录框拖拽模态框
案例分析 点击弹出层,模态框和遮挡层就会显示出来display:block; 点击关闭按钮,模态框和遮挡层就会隐藏起来display:none; 在页面中拖拽的原理:鼠标按下并且移动,之后松开鼠标 触发事件是鼠标按下mousedown,鼠标移动mousemove,鼠标松开mouseup 拖拽过程:鼠标移动过程中,获得最新的值赋值给模态框的left和top值,这样模态框可以跟着鼠标走了 鼠标按下触发的事件源是最上面一行,就是id为title 鼠标的坐标进去鼠标在盒子内的坐标,才是模态框真正的位置 鼠标按
岳泽以
2022/10/26
4.3K0
JavaScript案例:弹出登录框拖拽模态框
js原生模态登录框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.
贵哥的编程之路
2020/10/28
9.2K0
【如果你要学JS XII】——使用js实现模态框拖动
这篇文章来实现一下js中的放大镜效果,以及如何实现模态框拖动效果 先来了解一下offset,client和scroll系列属性
像素人
2023/12/25
4980
【如果你要学JS XII】——使用js实现模态框拖动
使用vue2.0实现一个简单的弹出对话框
在这个示例中,当点击"打开对话框"按钮时,showDialog属性会被设置为true,从而显示对话框。对话框使用了一个半透明的遮罩层(.dialog-wrapper)来覆盖整个页面,并在中间显示一个白色背景的对话框(.dialog)。点击对话框中的"关闭"按钮时,showDialog属性会被设置为false,对话框将被隐藏。
王小婷
2023/09/28
1.4K0
使用vue2.0实现一个简单的弹出对话框
【愚公系列】《AIGC辅助软件开发》016-AI辅助前端编程:利用ChatGPT在前端开发中快速生成Vue组件
文章地址:https://cloud.tencent.com/developer/article/2474495
愚公搬代码
2024/12/08
2890
【Html.js——小游戏】芝麻开门(蓝桥杯真题-2322)【合集】
选中 index.html 右键启动 Web Server 服务(Open with Live Server),让项目运行起来。
Rossy Yan
2025/02/02
2080
【Html.js——小游戏】芝麻开门(蓝桥杯真题-2322)【合集】
CodeBuddy跨界篇 | 产品经理写代码?不,你错了,我只是想画原型图
今天在上班期间,无意间听到了产品经理正在发愁,说最近工作比较忙,活比较多,有了新需求要花费大量时间思考方案,还要写需求文档,写完需求文档还要出开发原型给开发讲,愁死人了。听到这我突然就想到,上次我在我本机的VSCode 装了CodeBuddy 插件之后,利用 Craft 几句话就做出来一个数独游戏的事。那么我就想,我是不是也可以用VSCode 来直接出开发原型图呢?如果真的能出,明天就可以给产品经理指一条明路了,哈哈。
六月的雨在Tencent
2025/05/15
7271
从代码中诞生的浪漫:一个程序员的表白艺术
我正在参加CodeBuddy「首席试玩官」内容创作大赛,本文所使用的 CodeBuddy 免费下载链接:腾讯云代码助手 CodeBuddy - AI 时代的智能编程伙伴
Lethehong
2025/05/10
3060
从代码中诞生的浪漫:一个程序员的表白艺术
[网页五子棋][用户模块]客户端开发(登录功能和注册功能)
椰椰椰耶
2025/05/29
1130
[网页五子棋][用户模块]客户端开发(登录功能和注册功能)
【愚公系列】2022年01月 华为鸿蒙OS-04-容器组件(badge、dialog、div)(JS开发版)
文章目录 容器组件 一、badge 1.HML代码 2.CSS代码 3.JS代码 4.效果 二、dialog 1.HML代码 2.CSS代码 3.JS代码 4.效果 三、div 1.布局 1.1HML代码 1.2 CSS代码 1.3 效果 2.事件 2.1 拖拽事件 2.2 手指捏合事件 ---- 容器组件 一、badge 1.HML代码 <div class="container"> <badge class="badge" config="{{badgeConfig}}" visibl
愚公搬代码
2022/01/24
9510
【愚公系列】2022年01月 华为鸿蒙OS-04-容器组件(badge、dialog、div)(JS开发版)
Power BI数据+工作计划推送到手机
现在依据数据好坏为门店制定下一步工作计划。例如,点击宁波市江南路这一行,弹出对话框:
wujunmin
2025/04/30
790
Power BI数据+工作计划推送到手机
推荐阅读
相关推荐
教你使用HTML5原生对话框元素,轻松创建模态框组件
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档