前端:HTML5中dialog弹窗标签
教程管理员 发布于2023-09-29 07:28 HTML教程 121
简介:
前端:HTML5中dialog弹窗标签
浏览器HTML5中自带的dialog弹窗标签,可以快速实现弹窗效果
1、实现效果
2、实现代码
<!-- 弹框 --> <dialog id="dialog"> <div>dialog</div> <button id="btn-close">关闭</button> </dialog> <button id="btn-open">打开</button>
<script> let btnOpen = document.querySelector("#btn-open"); let btnClose = document.querySelector("#btn-close"); let dialog = document.querySelector("#dialog"); // 打开弹窗 btnOpen.addEventListener("click", function () { dialog.show(); }); // 关闭弹窗 btnClose.addEventListener("click", function () { dialog.close(); }); </script>
参考
你可能不知道的dialog弹窗
相关推荐
- 03-06 环保主题标签——绿色环保简约清晰Office PPT免费模板背景素材下载
- 10-04 在HTML中取得请求中的参数
- 10-04 SharePoint 2013 母版页取消和HTML页关联
- 10-04 29行代码使用HTML5 Canvas API绘制一颗红心
- 10-04 浏览器加载和渲染html的顺序,Div和Table的区别
- 10-04 《HTML5完美游戏开发》——2.6 Processing.js实例和整合
- 10-04 如何关闭Struts2的webconsole.html
- 10-04 《HTML5 开发实例大全》——1.4 使用CSS修饰HTML 5页面
- 10-04 《HTML5游戏编程核心技术与实战》——2.8 小结
- 10-04 腾讯视频生成的Html代码
- 控制面板
- 友情链接
- 最近发表
-
- 涂鸦而不乱简约艺术主题Office PPT免费模板背景素材下载
- 有创意的情人表白动态贺卡Office PPT免费模板背景素材下载
- 绿色简约技能竞赛电力Office PPT免费模板背景素材下载
- 极简几何商务蓝年终总结汇报Office PPT免费模板背景素材下载
- 蓝橙简约商务年终总结汇报Office PPT免费模板背景素材下载
- 绿色清新教育风课堂教学通用Office PPT免费模板背景素材下载
- 潮流复古艺术感年终总结Office PPT免费模板背景素材下载
- 浅绿商务风工作总结报告Office PPT免费模板背景素材下载
- 大气简约时尚年终总结汇报Office PPT免费模板背景素材下载
- 喜庆春节风公司年终誓师表彰大会Office PPT免费模板背景素材下载
- 最新留言
-