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();    
});
相关推荐
空山新雨(大队长)3 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5
索迪迈科技4 小时前
Flex布局——详解
前端·html·css3·html5
十碗饭吃不饱4 小时前
net::ERR_EMPTY_RESPONSE
java·javascript·chrome·html5
心一信息1 天前
ThreeJS骨骼示例
css·css3·html5
笑鸿的学习笔记2 天前
JavaScript笔记之JS 和 HTML5 的关系
javascript·笔记·html5
java水泥工2 天前
基于Echarts+HTML5可视化数据大屏展示-学生综合成绩评价系统大屏
spring boot·echarts·html5
Thetimezipsby2 天前
基于Taro4打造的一款最新版微信小程序、H5的多端开发简单模板
前端·javascript·微信小程序·typescript·html5·taro
java水泥工3 天前
基于Echarts+HTML5可视化数据大屏展示-茶叶种植大数据溯源平台
大数据·echarts·html5
java水泥工3 天前
基于Echarts+HTML5可视化数据大屏展示-图书馆大屏看板
前端·echarts·html5
小菜全4 天前
打包 Uniapp
javascript·vue.js·html5