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();    
});
相关推荐
桃园码工7 分钟前
15_HTML5 表单属性 --[HTML5 API 学习之旅]
前端·html5·表单属性
请叫我飞哥@9 小时前
HTML5 CSS 与样式详解
前端·css·html5
Amarantine、沐风倩✨12 小时前
设计一个监控摄像头物联网IOT(webRTC、音视频、文件存储)
java·物联网·音视频·webrtc·html5·视频编解码·七牛云存储
安冬的码畜日常1 天前
【CSS in Depth 2 精译_086】14.3:CSS 剪切路径(clip-path)的用法
前端·css·css3·html5·clip-path·css剪辑·css剪切路径
m0_748248021 天前
HTML5前端实现毛玻璃效果的可拖拽登录框
前端·html·html5
red润1 天前
使用 HTML5 Canvas 实现动态蜈蚣动画
前端·html·html5
m0_748248941 天前
HTML5系列(11)-- Web 无障碍开发指南
前端·html·html5
桃园码工2 天前
8_HTML5 SVG (4) --[HTML5 API 学习之旅]
html5·svg·滤镜·文本·stroke
羊小猪~~2 天前
前端入门之VUE--ajax、vuex、router,最后的前端总结
前端·javascript·css·vue.js·vscode·ajax·html5
桃园码工2 天前
13_HTML5 Audio(音频) --[HTML5 API 学习之旅]
音视频·html5·audio