使用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. C#字符类型

    C#字符串类型采用Unicode字符集,一个Unicode标准字符长度位16位,它允许用单个编码方案表示世界上使用的所有字符. 字符类型表示位char. 关于字符的转义:C#也可以使用字符转义,用   ...

  2. Elasticsearch教程(二）java集成Elasticsearch

    1.添加maven <!--tika抽取文件内容 --> <dependency> <groupId>org.apache.tika</groupId> ...

  3. 推荐一个第三方Qt库的集合 good

    https://inqlude.org/ Stable libraries | Development versions | Unreleased | Commercial | All attica ...

  4. 手机软件没过多久就删了 APP到底得了什么病？

    直击现场 PC互联网时代正渐行渐远,移动互联网的创业浪潮汹涌而至.2014年,中国成为拥有智能手机用户最多的国家,而疯狂生长的APP正占据新的风口.据了解,目前我国主要应用商店的APP已累计超过400 ...

  5. WCF研究-中篇

    中篇 5.托管于宿主 6.消息模式 7.WCF行为-实例管理和并发控制 8.安全 5.托管于宿主 托管 宿主Host Ø承载WCF Service运行的环境 自承载方式 系统服务方式 IIS方式 WA ...

  6. delphi中move函数的正确理解（const和var一样，都是传地址，所以Move是传地址，而恰恰不是传值）太精彩了 good

    我们能看到以下代码var pSource,pDest:PChar;     len: integer;.......................//一些代码Move(pSource,pDest,l ...

  7. PHP发送邮件功能实现（使用163邮箱）

    第一步 我用的是163邮箱发送邮件,做一个尝试,在尝试之前,需要要开启163邮箱的授权码如图所示,请记住您的授权码,将在之后的步骤中用到 第二步 需要下载一个类PHPMailer,我有这个资源已经上传 ...

  8. 由Qmake.exe/QtCreator.exe启动速度慢挖进去（非常有趣的调试过程，作者态度不错，而且关闭Welcome插件也是常见办法）

    一直用Qt Creator开发Qt程序,Nokia的Qt Creator实在太慢了,启动慢,编译速度也是超级慢.昨天,终于它慢的让我无法忍受了,我决定抛开手上的一切工作,深入挖掘Qt Creator启 ...

  9. Memcached在Linux系统下的安装和PHP开启 Memcached的 扩展 超级解决方案

    [项目背景]:阿里云ECS服务器,Linux(centos7.2 64位),环境部署使用的是阿里云一键安装包(LAMP)等 [项目需求]:linux安装memcached 和php开启Memcache ...

  10. 开源|性能优化利器：数据库审核平台Themis的选型与实践

    作者:韩锋 出处:DBAplus社群分享:来源:宜信技术学院 Themis开源地址:https://github.com/CreditEaseDBA 一.面临的挑战 1.运维规模及种类 我相信,这也是 ...