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();    
});
相关推荐
xhload3d3 小时前
智慧钢厂高炉冶炼仿真分析 | 图扑数字孪生
3d·智慧城市·html5·webgl·数字孪生·可视化·热力图·智慧工厂·工业互联网·工业组态·高炉炼铁·数字工厂·高炉炉体·智慧高炉·高炉
繁花与尘埃2 天前
HTML5简介与基本骨架(本文为个人学习笔记,内容整理自哔哩哔哩UP主【非学者勿扰】的公开课程。 > 所有知识点归属原作者,仅作非商业用途分享)
笔记·学习·html5
无尽夏_3 天前
HTML5(前端基础)
前端·html·html5
2501_915909064 天前
HTML5 与 HTTPS,页面能力、必要性、常见问题与实战排查
前端·ios·小程序·https·uni-app·iphone·html5
java水泥工4 天前
基于Echarts+HTML5可视化数据大屏展示-车辆综合管控平台
前端·echarts·html5·大屏模版
cooldream20096 天前
深度解析中秋节HTML5动画的实现
前端·html·html5
皮蛋瘦肉粥_1216 天前
pink老师html5+css3day06
前端·css3·html5
庵中十三居士9 天前
在线音频三选一强制选择测试(3-AFC)
html5
知识分享小能手10 天前
微信小程序入门学习教程,从入门到精通,微信小程序常用API(上)——知识点详解 + 案例实战(4)
前端·javascript·学习·微信小程序·小程序·html5·微信开放平台