当前位置： 首页 > news >正文

前端开发攻略---介绍HTML中的＜dialog＞标签，浏览器的原生弹框。

news 2026/3/27 20:07:25

1、演示

 2、介绍

<dialog> 标签用于定义对话框，即一个独立的窗口，通常用来显示对话框、提示框、确认框等弹出式内容。在对话框中，可以包含文本、表单元素、按钮等内容，用户可以和这些内容进行交互。

3、兼容性

4、示例代码

 

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>#dialog {border: 0;width: 500px;height: 500px;border: 1px solid #000;}#dialog::backdrop {background-color: rgba(0, 0, 0, 0.3);backdrop-filter: blur(1px);}</style></head><body><!-- 弄成模态框 showModal --><button class="openBtn">弹窗</button><dialog id="dialog"><div class="win"><p>这是一个弹框！！！</p><p><input type="text" /></p><p><input type="text" /></p><button class="closeBtn">关闭</button></div></dialog></body><script>const dialog = document.getElementById('dialog')const openBtn = document.querySelector('.openBtn')const closeBtn = document.querySelector('.closeBtn')dialog.addEventListener('close', function (e) {console.log('弹框关闭了')})openBtn.addEventListener('click', function () {// dialog.showdialog.showModal()})closeBtn.addEventListener('click', function () {dialog.close()})</script>
</html>

  1. open 属性：设置该属性为 true 时，对话框会默认打开显示，为 false 时则关闭。可以使用 JavaScript 来动态改变这个属性来控制对话框的显示状态。

  2. showModal() 方法：调用该方法可以以模态的形式显示对话框，即使用户点击其他部分页面也无法操作。一般在需要用户做出重要选择或者确认时使用。

  3. show() 方法：调用该方法可以显示对话框，但允许用户在显示的同时与页面上其他元素交互。

  4. close() 方法：调用该方法可以关闭对话框。

  5. ::backdrop：通过改伪元素的方式修改模态背景。

 

相关文章：

前端开发攻略---介绍HTML中的＜dialog＞标签，浏览器的原生弹框。

1、演示 2、介绍 <dialog> 标签用于定义对话框&#xff0c;即一个独立的窗口&#xff0c;通常用来显示对话框、提示框、确认框等弹出式内容。在对话框中&#xff0c;可以包含文本、表单元素、按钮等内容&#xff0c;用户可以和这些内容进行交互。 3、兼容性 4、示例代码 …...

编程日记 2024/5/6 17:14:12

让外贸业绩翻倍的销售话术分享

业绩翻三倍的话术&#xff0c;今后无论你遇到挑剔、犹豫、理智的顾客&#xff0c;都能轻松搞定。点赞存起来慢慢看&#xff0c;以免找不到。 与客户有效沟通技巧5的20句金句 业绩翻 3 倍&#xff0c;今后无论你遇到挑剔、犹豫、理智的顾客&#xff0c;都能轻松搞定。点赞存起来…...

编程日记 2024/5/6 17:11:31

观测与预测差值自动变化系统噪声Q的自适应UKF（AUKF_Q）MATLAB编写

简述 基于三维模型的UKF&#xff0c;设计一段时间的输入状态误差较大&#xff0c;此时通过对比预测的状态值与观测值的残差&#xff0c;在相应的情况下自适应扩大系统方差Q&#xff0c;构成自适应无迹卡尔曼滤波&#xff08;AUKF&#xff09;&#xff0c;与传统的UKF相比&…...

编程日记 2024/5/6 17:09:27

虚拟数据中心

创建数据中心和连接宿主机 DRS:收集群集内所有主机和虚拟机的资源使用情况信息&#xff0c;并根据特定的运行状况给出建议或迁移虚拟机HA:如果一台主机出现故障&#xff0c;则该主机上运行的所有虚拟机都将立即在同一群集的其他主机上重新启动EVC:增强型vMotionVirtual SAN:集中…...

编程日记 2024/5/6 17:06:56

解决Blender导出FBX文件到Unity坐标轴错误的问题

发现Blender的模型导入到Unity里面有问题,简单研究了下发现是坐标系不同,Unity使用的是左手坐标系,Blender使用的是右手坐标系 。 下面直接将如何解决 首先忽略Blender的右手坐标系以及Z轴朝上的事&#xff0c;依照unity坐标系情况修改模型物体的旋转&#xff0c;以Blender猴…...

编程日记 2024/5/6 17:05:21

基于微信小程序的校园二手闲置物品交易平台的设计与实现

基于微信小程序的校园二手闲置物品交易平台的设计与实现 “Design and Implementation of a Campus Second-Hand Marketplace Platform based on WeChat Mini Program” 完整下载链接:基于微信小程序的校园二手闲置物品交易平台的设计与实现 文章目录 基于微信小程序的校园二…...

编程日记 2024/5/6 17:01:56

java中多线程的3种实现方法

1.继承Thread类 优点&#xff1a;代码简单&#xff0c;可以直接使用Thread类里面的方法。 缺点&#xff1a;扩张性较差&#xff0c;应为在java中&#xff0c;一个类只能继承一个父类。 2.实现Runnable接口 3.实现Callable接口 2和3的优缺点是一样的 优点&#xff1a;扩展性强&…...

编程日记 2024/5/6 16:55:24

【Docker】docker compose服务编排

docker compose 简介 Dockerfile模板文件可以定义一个单独的应用容器&#xff0c;如果需要定义多个容器就需要服务编排。 docker swarm&#xff08;管理跨节点&#xff09; Dockerfile可以让用户管理一个单独的应用容器&#xff1b;而Compose则允许用户在一个模板&#xff08…...

编程日记 2024/5/6 16:53:52

elementui的el-select+el-tree+el-input实现可搜索的下拉树组件

部分实现代码如下 <template> <div><el-selectv-model"item.TableName"placeholder"请选择":disabled"!item.disabled"visible-change"handleVisible"ref"TableName"><el-input placeholder"请输…...

编程日记 2024/5/6 16:51:30

微信公众号排名 SEO的5个策略

随着微信公众号在社交媒体领域的持续发展和普及&#xff0c;如何提升公众号的搜索排名&#xff0c;成为许多运营者关注的焦点。公众号排名SEO&#xff0c;即针对微信公众号进行搜索引擎优化&#xff0c;旨在提高公众号在搜索结果中的曝光率和点击率。下面&#xff0c;我们将深入…...

编程日记 2024/5/6 16:49:07

python烟花代码

在Python中&#xff0c;可以使用多种方式来模拟烟花效果&#xff0c;其中一种常见的方法是使用turtle图形库来绘制。以下是一个简单的示例&#xff0c;展示了如何使用turtle来创建一个烟花效果的动画&#xff1a; import turtle import random# 设置屏幕和背景 screen turtle…...

编程日记 2024/5/6 16:46:47

Python高级编程

描述 集合&#xff0c;列表生成式&#xff0c;生成器&#xff0c;迭代器&#xff0c;切片 Python 中的集合类型是一种无序、不重复的数据容器&#xff0c;用于存储可哈希&#xff08;hashable&#xff09;的元素。Python 提供了两种内置的集合类型&#xff1a;set 和 frozens…...

编程日记 2024/5/6 16:45:36

leetCode75. 颜色分类

leetCode75. 颜色分类 题目思路 代码 class Solution { public:void sortColors(vector<int>& nums) {for(int i 0, j 0, k nums.size() - 1; i < k;){if(nums[i] 0) swap(nums[i],nums[j]);else if(nums[i] 2) swap(nums[i],nums[k--]);else if(nums[i] …...

编程日记 2024/5/6 16:43:14

选择器、pxcook软件、盒子模型

结构伪类选择器 定义&#xff1a;根据结构的元素关系来查找元素。 <title>Document</title><style>li:first-child{color:aqua ;}li:last-child{color: aqua;}li:nth-child(3){color: aqua;}</style> </head> <body><ul><li>…...

编程日记 2024/5/6 16:39:37

商城系统秒杀功能设计思想

业务特点 1、瞬时并发量大&#xff0c;秒杀时会有大量用户在同一时间进行抢购&#xff0c;瞬时并发访问量突增几倍、甚至几十倍以上 2、库存量少&#xff0c;一般秒杀活动商品量很少&#xff0c;这就导致了只有极少量用户能成功购买到。 3、业务和流程较为常见&#xff0c;一般…...

编程日记 2024/5/6 16:36:51

#初始化列表

1.再谈构造函数 1.1构造函数的组成 构造函数包括函数体赋值与初始化列表初始化。 1.2函数体赋值 class Date { public:Date(int year, int month, int day){_year year;_month month;_day day;} private:int _year;int _month;int _day; };虽然上述构造函数调用之后&…...

编程日记 2024/5/6 16:35:43

Vue-组件中的data

一个组件的data选项必须是一个函数。保证每个组件实例&#xff0c;维护独立的一份数据对象。如下图&#xff1a; 组件一旦封装好了&#xff0c;可以使用多次&#xff0c;比如数字框组件使用了三次&#xff1a; 每次创建新的组件实例&#xff0c;都会重新执行一次data函数&#…...

编程日记 2024/5/6 16:34:10

抖音小店达人佣金应该怎么结算呢？给达人设置多少佣金合适？

大家好&#xff0c;我是电商小V 咱们在运营抖音小店的时候一定会遇到被达人催促结算佣金的情况&#xff0c;咱们给达人合作的时候都会遇到过新手达人&#xff0c;就是给咱们直播带货之后催促咱们赶紧结算商品的佣金&#xff0c; 但是咱们都需要知道一点&#xff0c;那就是小店的…...

编程日记 2024/5/6 16:33:00

水稻病害检测（YOLO数据集，多分类，稻瘟病、纹枯病、褐斑病、枯心病、霜霉病、水稻细菌性条纹斑病、稻苞虫）

是自己利用LabelImg工具进行手工标注&#xff0c;数据集制作不易&#xff0c;请尊重版权&#xff08;稻瘟病、纹枯病、褐斑病、枯心病、霜霉病、水稻细菌性条纹斑病、稻苞虫&#xff09; 如果需要yolv8检测模型和数据集放在一起的压缩包&#xff0c;可以关注&#xff1a;最新最…...

编程日记 2024/5/6 16:31:29

MYSQL数据库专业术语及创建数据表详细讲解{sql语句创建数据库语句及条件子句解析，编码格式解析，创建数据表解析，表定义字段解析，主键约束解析}

MYSQL数据库中的专业术语 数据库&#xff08;Database&#xff09;&#xff1a;存储数据的集合&#xff0c;是数据的逻辑容器。 表&#xff08;Table&#xff09;&#xff1a;数据库中存储数据的结构&#xff0c;由行&#xff08;记录&#xff09;和列&#xff08;字段&#x…...

编程日记 2024/5/6 16:28:57

python-flask-djangol框架的婚恋相亲交友网站

目录技术选型与框架对比核心功能模块设计数据库模型示例&#xff08;Django ORM&#xff09;安全防护措施部署方案开发路线图项目技术支持源码获取详细视频演示 &#xff1a;文章底部获取博主联系方式&#xff01;同行可合作技术选型与框架对比 Flask&#xff1a;轻量级框架&a…...

编程新知 2026/3/27 18:48:38

告别官方包：手把手教你为遗留项目编译一个“增强版”Qt5.15.17

告别官方包&#xff1a;手把手教你为遗留项目编译一个“增强版”Qt5.15.17 当官方支持终止后&#xff0c;维护基于Qt5的遗留项目就像在悬崖边行走——你需要稳定性&#xff0c;但又渴望那些关键补丁和完整功能。本文将带你深入探索如何为团队构建一个功能完备的私有Qt工具链&am…...

编程新知 2026/3/27 18:46:38

MOSSE算法在无人机视频跟踪中的应用：一个被低估的轻量级选择？

MOSSE算法&#xff1a;无人机视觉跟踪中未被充分利用的高效解决方案 当你在树莓派或Jetson Nano这样的边缘设备上部署无人机视觉系统时&#xff0c;是否经常面临这样的困境&#xff1a;既需要实时性能&#xff0c;又受限于计算资源和功耗&#xff1f;在众多目标跟踪算法中&…...

编程新知 2026/3/27 18:24:15

DbGate数据库管理工具：Docker一键部署与跨平台远程访问实战

1. 为什么选择DbGateDocker组合 第一次接触DbGate是在一个需要同时管理MySQL和MongoDB的项目中。当时团队里有人用Navicat&#xff0c;有人用DBeaver&#xff0c;数据库类型切换时总要重新适应界面。直到发现这个支持多数据库的开源工具&#xff0c;才真正体会到什么叫"一…...

编程新知 2026/3/27 17:35:58

4个关键步骤解决Calibre中文路径乱码难题

4个关键步骤解决Calibre中文路径乱码难题 【免费下载链接】calibre-do-not-translate-my-path Switch my calibre library from ascii path to plain Unicode path. 将我的书库从拼音目录切换至非纯英文&#xff08;中文&#xff09;命名 项目地址: https://gitcode.com/gh_m…...

编程新知 2026/3/27 14:42:45

STM32模拟Linux内核自动初始化机制实现

STM32模拟Linux内核自动初始化机制实现1. 项目概述1.1 技术背景在传统嵌入式开发中&#xff0c;程序通常按照顺序逻辑执行&#xff0c;当系统复杂度增加时会导致代码臃肿、模块耦合紧密。Linux内核通过initcall机制实现了模块化初始化&#xff0c;本项目在STM32平台上模拟实现了…...

编程新知 2026/3/27 13:45:13

FOC算法避坑指南：克拉克变换的‘等幅值’与‘等功率’到底选哪个？基于AS5600编码器的实测对比

FOC算法避坑指南&#xff1a;克拉克变换的‘等幅值’与‘等功率’到底选哪个&#xff1f;基于AS5600编码器的实测对比 在无刷电机控制领域&#xff0c;FOC&#xff08;Field Oriented Control&#xff09;算法因其优异的动态性能和效率表现&#xff0c;已成为工业驱动和高精度…...

编程新知 2026/3/27 13:11:01

第8篇 | 逻辑回归

逻辑回归虽然名字中包含"回归"&#xff0c;但实际上是一种分类算法。它通过sigmoid函数将线性输出转换为概率&#xff0c;广泛用于二分类问题。本篇将详细介绍逻辑回归的原理、实现和应用。一、逻辑回归概述逻辑回归用于处理二分类问题&#xff0c;输出为样本属于某一…...

编程新知 2026/3/27 10:53:51

从GitHub开源项目到一键部署：OFA模型在星图平台的快速落地

从GitHub开源项目到一键部署&#xff1a;OFA模型在星图平台的快速落地 1. 引言 你是不是也遇到过这种情况&#xff1f;在GitHub上看到一个特别酷的AI项目&#xff0c;比如OFA这种能看图说话、理解多模态信息的模型&#xff0c;心里痒痒的想立刻上手试试。结果呢&#xff0c;光…...

编程新知 2026/3/27 10:49:50

Windows下OpenClaw实战：30分钟接入Qwen3.5-4B-Claude模型

Windows下OpenClaw实战&#xff1a;30分钟接入Qwen3.5-4B-Claude模型 1. 为什么选择WindowsOpenClaw组合 去年我在尝试自动化办公流程时&#xff0c;发现很多AI工具对Windows支持并不友好。直到遇到OpenClaw&#xff0c;这个开源的智能体框架让我眼前一亮——它不仅能像人类一…...

编程新知 2026/3/27 10:19:33