HTML5:dialog

JavaScript 练手小技巧:HTML5 的 dialog 标签制作对话框_dialog html-CSDN博客

html 复制代码
<dialog id="dialog">
<h2 align="center">修改</h2>
<input type="text" id="title1" placeholder="标题" value=""><p>
<input type="text" id="website1" placeholder="https://" value="https://"><p>
<center><button id="button_modify_confirm">确定</button> <button id="button_modify_cancel">取消</button></center>
</dialog>

Modal 模式可以按 ESC 关闭 dialog

javascript 复制代码
menu_modify.addEventListener('click', function(){
    menu.style.display = 'none';
    dialog.showModal();
});

点击 dialog 外部区域关闭窗口

javascript 复制代码
dialog.addEventListener("click", function(e){
    if (e.target.nodeName.toLowerCase() == "dialog") {
         this.close();
    }
});

按钮关闭窗口

javascript 复制代码
button_modify_cancel.addEventListener("click", function(e){
    dialog.close();    
});
相关推荐
a别念m12 小时前
HTML5 离线存储
前端·html·html5
菜包eo1 天前
教育行业可以采用Html5全链路对视频进行加密?有什么优势?
前端·音视频·html5
gyeolhada2 天前
Web: 基础知识、HTML、CSS、JavaScript(英文版--知识点学习/复习)
前端·javascript·css3·html5·web
彤银浦3 天前
Web学习笔记3
前端·笔记·学习·html5
爱电摇的小码农4 天前
【深度探究系列(5)】:前端开发打怪升级指南:从踩坑到封神的解决方案手册
前端·javascript·css·vue.js·node.js·html5·xss
灵犀学长4 天前
解锁HTML5页面生命周期API:前端开发的新视角
前端·html·html5
千鼎数字孪生-可视化4 天前
Web技术栈重塑HMI开发:HTML5+WebGL的轻量化实践路径
前端·html5·webgl
iphone1087 天前
一次编码,多端运行:HTML5多终端调用
前端·javascript·html·html5
一只小风华~7 天前
Web前端开发: :has功能性伪类选择器
前端·html·html5·web
长路 ㅤ   8 天前
前端技术博客汇总文档
javascript·vue.js·css3·html5·前端技术