使用JS在当前页面在div中加载弹出窗口，并让当前页面变灰不可操作。

加载弹出窗口的div需将宽高设置成整个页面的大小，以覆盖当前页面的内容。

opacity：0.6；  页面可见度设置为0.6（1为完全不可见）。
z-index: 1024； 设置元素堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。并且只能在定位元素上奏效（例如 position:absolute;）

main.html

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>JS实现弹出窗口，页面变灰不可操作</title>

<script src="../js/jquery.js"></script>

<style type="text/css">

    .opacity_bg {

        width: 100%;

        height: 100%;

        position: absolute;

        top: 0;

        left: 0;

        background: #000;

        opacity: 0.6;

        margin: auto;

        z-index: 1024;

        display: none;

    }

    #dialog {

        position: absolute;

        top: 30%;

        left: 40%;

        z-index: 1025;

    }

</style>

<script type="text/javascript">

    function alertWin(){

        $(".opacity_bg").show(); // 显示背景层,覆盖当前页面内容

        $("#dialog").load("../jsp/alert.html");    // 加载弹出页

    }

    function iclose(){

        $(".opacity_bg").hide(); // 隐藏背景层

        $("#dialog").empty().hide(); // 清除弹出页

    }

</script>

</head>

<body>

    <div>

        <div class="opacity_bg"></div>

        <div id="dialog"></div>

        <button onclick="alertWin();">弹出窗口</button>

    </div>

</body>

</html>

alert.html

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

    <div>

        <h1 style="color:#fff;">弹出的子页面</h1>

        <button onclick="iclose();">点击关闭</button>

    </div>

</body>

</html>

JS实现当前页弹出窗口，且页面变灰不可操作的更多相关文章

  1. 2、弹出窗口 Alert

    1.只是弹出框 /* --- page1.html ---*/ <ion-navbar *navbar> <ion-title>Tab 1</ion-title> ...

  2. fancybox 关闭弹出窗口 parent.$.fancybox.close(); 无反应 fancybox 关闭弹出窗口父页面自动刷新,弹出子窗口前后事件

    当我们在父页面使用 fancybox 弹出窗口后,如果想自己手动关闭,则可以 function Cancel() { parent.$.fancybox.close(); } 如果关闭没有反应,最好看 ...

  3. js window.open()弹出窗口参数说明及居中设置

    window.open()可以弹出一个新的窗口,并且通过参数控制窗口的各项属性. 最基本的弹出窗口代码 window.open('httP://codeo.cn/'); window.open()各参 ...

  4. js实现弹出窗口、页面变成灰色并不可操作的例子

    function show() //显示隐藏层和弹出层 { var hideobj=document.getElementById("hidebg"); hidebg.style. ...

  5. Jbox 弹出窗口 子页面操作完成后关闭 父页面刷新

    父页面js //父页面js <script> var isFreshFlag = '1'; //添加会议活动 function addMeetingAct(){ var attendVip ...

  6. JS编写类似弹出窗口样式显示层

    JSp中增加div <!-- 提交变更申请 --> <div id="changeWindow" class="easyui-window" ...

  7. ASP.NEt ajax 弹出窗口在页面无法关闭

    <meta http-equiv="X-UA-Compatible" content="IE=9" />     今天又有客戶投訴公司的網頁有問題. ...

  8. 关于js中alert弹出窗口换行！

    请用"\n" 如果这个不可以的话就是"\\n"   比如: <script type="text/javascript"> al ...

  9. web页面弹出窗口代码大全

    //-----------按钮提示框----------// <input type="button" name="btn2" id="btn2 ...

随机推荐

  1. Windows 10 版本信息

    原文 https://technet.microsoft.com/zh-cn/windows/release-info Windows 10 版本信息 Microsoft 已更新其服务模型. 半年频道 ...

  2. OpenSSL的命令行用法，以及参数大全

    c:\openssl\bin>opensslOpenSSL> versionOpenSSL 1.0.2j 26 Sep 2016OpenSSL> https://wiki.opens ...

  3. 《C++ Primer》读书笔记 第一章

    读<C++ Primer>才知道,自己对C++知之甚少... 写个博客记录下自己C++的成长,只是读书笔记,不是对<C++ Primer>知识点的总结,而是对自己在书上看到的以 ...

  4. 系列教程 - java web开发

    代码之间工作室持续推出Java Web开发系列教程与案例,供广大朋友分享交流技术经验,帮助喜欢java的朋友们学习进步: java web 开发教程(1) - 开发环境搭建 技术交流QQ群: 商务合作 ...

  5. 关于linux网卡消失的问题

    首先我也是一名学生,在学习的过程Linux的过程中,因为老师要求配置hadoop集群所以就匆匆忙忙的上手了,但是在配置网络的问题时遇到了网卡消失的问题 我在网上询问了许多的人,但是还是没有找到一个很好 ...

  6. 关于C# 异步

    关于C# 异步操作整理 按照个人的理解, 写一个接口用Task异步操作(态度:接受并且学习,您提出宝贵的经验与理解,我会认真学习): 在主线程中调用异步方法,如果主线程依赖异步方法的返回值那么你一定会 ...

  7. 使用burpsuite进行重放攻击

    原创博客,转载请注出处! 我的公众号,正在建设中,欢迎关注: 1.安装好burpsuite后打开程序,切换至proxy->intercipt,因为是重放攻击不用拦截数据包所以关闭intercep ...

  8. spring 5.x 系列第20篇 ——spring简单邮件、附件邮件、内嵌资源邮件、模板邮件发送 (代码配置方式)

    源码Gitub地址:https://github.com/heibaiying/spring-samples-for-all 一.说明 1.1 项目结构说明 邮件发送配置类为com.heibaiyin ...

  9. 【设计模式】行为型01策略模式（strategy patten）

    学设计模式一段时间了,有些懂了,有些半知半解,通过写笔记博客的方式总结一下: 关于策略模式,我的个人理解就是将一些经常变动的算法独立抽取出来,可以是一个方法,也可以是一个策略类,这样,如果有需求变更, ...

  10. Netty源码分析--Channel注册&绑定端口（下）（七）

    接下来,我们看到的就是两个非常重要的方法 就是 processSelectedKeys() 和  runAllTasks() 方法了. selectionKey中ready的事件,如accept.co ...