首页 前端知识 HTML5:dialog

HTML5:dialog

2024-09-14 23:09:55 前端知识 前端哥 961 525 我要收藏

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

 

<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

menu_modify.addEventListener('click', function(){
    menu.style.display = 'none';
    dialog.showModal();
});

 点击 dialog 外部区域关闭窗口

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

按钮关闭窗口 

button_modify_cancel.addEventListener("click", function(e){
    dialog.close();    
});

转载请注明出处或者链接地址:https://www.qianduange.cn//article/18316.html
标签
评论
发布的文章

HTML5 CSS3面试题整理

2024-05-05 22:05:21

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!