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();    
});
相关推荐
iphone10810 小时前
一次编码,多端运行:HTML5多终端调用
前端·javascript·html·html5
一只小风华~16 小时前
Web前端开发: :has功能性伪类选择器
前端·html·html5·web
长路 ㅤ   1 天前
前端技术博客汇总文档
javascript·vue.js·css3·html5·前端技术
张晓~183399481212 天前
数字人源码部署流程分享--- PC+小程序融合方案
javascript·小程序·矩阵·aigc·文心一言·html5
xhload3d2 天前
智慧航天运载体系全生命周期监测 | 图扑数字孪生
物联网·3d·智慧城市·html5·webgl·数字孪生·可视化·工业互联网·三维建模·工控·航空航天·火箭升空·智慧航空·智慧航天·火箭发射·火箭回收
涔溪4 天前
HTML5 实现的圣诞主题网站源码,使用了 HTML5 和 CSS3 技术,界面美观、节日氛围浓厚。
css3·html5·节日
Amy.Wang4 天前
前端如何实现电子签名
前端·javascript·html5
veminhe5 天前
html怎么设置html5
html·html5
失落的多巴胺5 天前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
veminhe15 天前
HTML5 浏览器支持
前端·html·html5