JavaScript实现模态对话框

心已赠人 2022-05-29 14:14 322阅读 0赞

代码演示：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style> # 文本框 .content{ height: 1800px; background-color: white; } # 遮挡框 .shade{ position: fixed; top:0; left: 0; right: 0; bottom: 0; background-color: gray; opacity: 0.7; } # 模态框 .model{ width: 200px; height: 200px; background-color: bisque; position: absolute; top:50%; left: 50%; margin-top: -100px; margin-left: -100px; } # 隐藏 .hide{ display: none; } </style>
    </head>
    <body>
    
    <div class="content">
    #  绑定显示事件
        <button onclick="show()">show</button>  
        hellohellohellohellohellohellohellohellohellohellohellohello
    </div>
    
    <div class="shade hide"></div>
    
    # 绑定隐藏事件
    <div class="model hide">
        <button onclick="cancel()">cancel</button>
    </div>
    
    
    <script> # 设置显示函数 function show() { var ele_shade=document.getElementsByClassName("shade")[0]; var ele_model=document.getElementsByClassName("model")[0]; ele_model.classList.remove("hide"); ele_shade.classList.remove("hide"); } # 设置取消函数 function cancel() { var ele_shade=document.getElementsByClassName("shade")[0]; var ele_model=document.getElementsByClassName("model")[0]; ele_model.classList.add("hide"); ele_shade.classList.add("hide"); } </script>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，322人围观）

还没有评论，来说两句吧...

相关阅读

相关 C++ MFC深入详解之----模态对话框与非模态对话框

对话框的种类有两种类型的对话框：模态（ Modal）对话框和非模态（ Modeless）对话框 > 模态对话框 > > 模态对话框是指当其显示时，程序会

小咪咪/ 2023年06月23日 15:29/ 0 赞/ 368 阅读

相关 JavaScript之实例练习（模态对话框详解）

文章目录一、Class的属性二、模态对话框一、Class的属性 1、class的常用操作获取

梦里梦外;/ 2023年03月13日 11:47/ 0 赞/ 176 阅读

相关 WIN32 非模态对话框

//创建一个对话窗口实例 HWND dialogHwnd=CreateDialogA(hInstance, MAKEINTRESOURCEA(IDD_DI

心已赠人/ 2022年12月20日 14:56/ 0 赞/ 197 阅读

相关 MFC 非模态对话框

非模态对话框的建立方法： 1、在XXXDlg.h定义一个静态类的指针： <span style="font-size:14px;">static CFind pFi

谁借莪１个温暖的怀抱￠/ 2022年08月13日 13:55/ 0 赞/ 232 阅读

相关模态对话框测试

模态对话框只能屏蔽来自鼠标、键盘的消息，而不能屏蔽其他消息，也即模态对话框会独占用户输入。其实现原理如下： 1. 让父窗口失效EnableWindow(pardent,FAL

逃离我推掉我的手/ 2022年07月15日 02:54/ 0 赞/ 278 阅读

相关 MFC中的模态对话框与非模态对话框

模态对话框创建： MyDialog mydlg; mydlg.DoModal() 当前只能运行此模态对话框，且停止主窗口的运行，直到模态对话框退出，才允许主

快来打我*/ 2022年07月15日 02:42/ 0 赞/ 325 阅读

相关 JavaScript实现模态对话框

代码演示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

心已赠人/ 2022年05月29日 14:14/ 0 赞/ 323 阅读

相关 javaScript用DIV模拟创建模态对话框

现在google浏览器不支持非模态对话框了，所以只好用DIV模拟创建一个模态对话框，代码如下： <!DOCTYPE html> <html> <head> <met

Myth丶恋晨/ 2022年05月14日 04:59/ 0 赞/ 257 阅读

相关 Dialog 关于对话框问题对话框文件对话框模态和非模态对话框

![20190725210837432.png][] ifndef MAINWINDOW_H define MAINWINDOW_H inc

深碍√TFBOYSˉ_/ 2021年11月23日 04:46/ 0 赞/ 510 阅读

相关 Bootstrap4 模态对话框示例

<!DOCTYPE html> <html> <head> <title>Bootstrap 实例</title> <meta

本是古典何须时尚/ 2021年07月26日 14:10/ 0 赞/ 490 阅读