前端开发攻略---介绍HTML中的＜dialog＞标签，浏览器的原生弹框。
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>
open属性：设置该属性为 true 时，对话框会默认打开显示，为 false 时则关闭。可以使用 JavaScript 来动态改变这个属性来控制对话框的显示状态。
showModal()方法：调用该方法可以以模态的形式显示对话框，即使用户点击其他部分页面也无法操作。一般在需要用户做出重要选择或者确认时使用。
show()方法：调用该方法可以显示对话框，但允许用户在显示的同时与页面上其他元素交互。
close()方法：调用该方法可以关闭对话框。::backdrop：通过改伪元素的方式修改模态背景。
相关文章：
前端开发攻略---介绍HTML中的＜dialog＞标签，浏览器的原生弹框。
1、演示 2、介绍 <dialog> 标签用于定义对话框，即一个独立的窗口，通常用来显示对话框、提示框、确认框等弹出式内容。在对话框中，可以包含文本、表单元素、按钮等内容，用户可以和这些内容进行交互。 3、兼容性 4、示例代码 …...
让外贸业绩翻倍的销售话术分享
业绩翻三倍的话术，今后无论你遇到挑剔、犹豫、理智的顾客，都能轻松搞定。点赞存起来慢慢看，以免找不到。 与客户有效沟通技巧5的20句金句 业绩翻 3 倍，今后无论你遇到挑剔、犹豫、理智的顾客，都能轻松搞定。点赞存起来…...
观测与预测差值自动变化系统噪声Q的自适应UKF（AUKF_Q）MATLAB编写
简述 基于三维模型的UKF，设计一段时间的输入状态误差较大，此时通过对比预测的状态值与观测值的残差，在相应的情况下自适应扩大系统方差Q，构成自适应无迹卡尔曼滤波（AUKF），与传统的UKF相比&…...
虚拟数据中心
创建数据中心和连接宿主机 DRS:收集群集内所有主机和虚拟机的资源使用情况信息，并根据特定的运行状况给出建议或迁移虚拟机HA:如果一台主机出现故障，则该主机上运行的所有虚拟机都将立即在同一群集的其他主机上重新启动EVC:增强型vMotionVirtual SAN:集中…...
解决Blender导出FBX文件到Unity坐标轴错误的问题
发现Blender的模型导入到Unity里面有问题,简单研究了下发现是坐标系不同,Unity使用的是左手坐标系,Blender使用的是右手坐标系 。 下面直接将如何解决 首先忽略Blender的右手坐标系以及Z轴朝上的事，依照unity坐标系情况修改模型物体的旋转，以Blender猴…...
基于微信小程序的校园二手闲置物品交易平台的设计与实现
基于微信小程序的校园二手闲置物品交易平台的设计与实现 “Design and Implementation of a Campus Second-Hand Marketplace Platform based on WeChat Mini Program” 完整下载链接:基于微信小程序的校园二手闲置物品交易平台的设计与实现 文章目录 基于微信小程序的校园二…...
java中多线程的3种实现方法
1.继承Thread类 优点：代码简单，可以直接使用Thread类里面的方法。 缺点：扩张性较差，应为在java中，一个类只能继承一个父类。 2.实现Runnable接口 3.实现Callable接口 2和3的优缺点是一样的 优点：扩展性强&…...
【Docker】docker compose服务编排
docker compose 简介 Dockerfile模板文件可以定义一个单独的应用容器，如果需要定义多个容器就需要服务编排。 docker swarm（管理跨节点） Dockerfile可以让用户管理一个单独的应用容器；而Compose则允许用户在一个模板（…...
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"请输…...
微信公众号排名 SEO的5个策略
随着微信公众号在社交媒体领域的持续发展和普及，如何提升公众号的搜索排名，成为许多运营者关注的焦点。公众号排名SEO，即针对微信公众号进行搜索引擎优化，旨在提高公众号在搜索结果中的曝光率和点击率。下面，我们将深入…...
python烟花代码
在Python中，可以使用多种方式来模拟烟花效果，其中一种常见的方法是使用turtle图形库来绘制。以下是一个简单的示例，展示了如何使用turtle来创建一个烟花效果的动画： import turtle import random# 设置屏幕和背景 screen turtle…...
Python高级编程
描述 集合，列表生成式，生成器，迭代器，切片 Python 中的集合类型是一种无序、不重复的数据容器，用于存储可哈希（hashable）的元素。Python 提供了两种内置的集合类型：set 和 frozens…...
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] …...
选择器、pxcook软件、盒子模型
结构伪类选择器 定义：根据结构的元素关系来查找元素。 <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>…...
商城系统秒杀功能设计思想
业务特点 1、瞬时并发量大，秒杀时会有大量用户在同一时间进行抢购，瞬时并发访问量突增几倍、甚至几十倍以上 2、库存量少，一般秒杀活动商品量很少，这就导致了只有极少量用户能成功购买到。 3、业务和流程较为常见，一般…...
#初始化列表
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; };虽然上述构造函数调用之后&…...
Vue-组件中的data
一个组件的data选项必须是一个函数。保证每个组件实例，维护独立的一份数据对象。如下图： 组件一旦封装好了，可以使用多次，比如数字框组件使用了三次： 每次创建新的组件实例，都会重新执行一次data函数&#…...
抖音小店达人佣金应该怎么结算呢？给达人设置多少佣金合适？
大家好，我是电商小V 咱们在运营抖音小店的时候一定会遇到被达人催促结算佣金的情况，咱们给达人合作的时候都会遇到过新手达人，就是给咱们直播带货之后催促咱们赶紧结算商品的佣金， 但是咱们都需要知道一点，那就是小店的…...
水稻病害检测（YOLO数据集，多分类，稻瘟病、纹枯病、褐斑病、枯心病、霜霉病、水稻细菌性条纹斑病、稻苞虫）
是自己利用LabelImg工具进行手工标注，数据集制作不易，请尊重版权（稻瘟病、纹枯病、褐斑病、枯心病、霜霉病、水稻细菌性条纹斑病、稻苞虫） 如果需要yolv8检测模型和数据集放在一起的压缩包，可以关注：最新最…...
MYSQL数据库专业术语及创建数据表详细讲解{sql语句创建数据库语句及条件子句解析，编码格式解析，创建数据表解析，表定义字段解析，主键约束解析}
MYSQL数据库中的专业术语 数据库（Database）：存储数据的集合，是数据的逻辑容器。 表（Table）：数据库中存储数据的结构，由行（记录）和列（字段&#x…...
Oracle查询表空间大小
1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...
在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module
1、为什么要修改 CONNECT 报文？ 多租户隔离：自动为接入设备追加租户前缀，后端按 ClientID 拆分队列。零代码鉴权：将入站用户名替换为 OAuth Access-Token，后端 Broker 统一校验。灰度发布：根据 IP/地理位写…...
【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力
引言： 在人工智能快速发展的浪潮中，快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型（LLM）。该模型代表着该领域的重大突破，通过独特方式融合思考与非思考…...
从零开始打造 OpenSTLinux 6.6 Yocto 系统（基于STM32CubeMX）（九）
设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile，新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...
【Oracle】分区表
个人主页：Guiat 归属专栏：Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...
2023赣州旅游投资集团
单选题 1.“不登高山，不知天之高也；不临深溪，不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...
MySQL 部分重点知识篇
一、数据库对象 1. 主键 定义 ：主键是用于唯一标识表中每一行记录的字段或字段组合。它具有唯一性和非空性特点。 作用 ：确保数据的完整性，便于数据的查询和管理。 示例 ：在学生信息表中，学号可以作为主键ÿ…...
Vite中定义@软链接
在webpack中可以直接通过符号表示src路径，但是vite中默认不可以。 如何实现： vite中提供了resolve.alias：通过别名在指向一个具体的路径 在vite.config.js中 import { join } from pathexport default defineConfig({plugins: [vue()],//…...
规则与人性的天平——由高考迟到事件引发的思考
当那位身着校服的考生在考场关闭1分钟后狂奔而至，他涨红的脸上写满绝望。铁门内秒针划过的弧度，成为改变人生的残酷抛物线。家长声嘶力竭的哀求与考务人员机械的"这是规定"，构成当代中国教育最尖锐的隐喻。 一、刚性规则的必要性 …...
2025.6.9总结（利与弊）
凡事都有两面性。在大厂上班也不例外。今天找开发定位问题，从一个接口人不断溯源到另一个 接口人。有时候，不知道是谁的责任填。将工作内容分的很细，每个人负责其中的一小块。我清楚的意识到，自己就是个可以随时替换的螺丝钉&…...