使用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. 关于EF ORM 框架的使用问题

    1.无法更新 EntitySet“System_UserInfo20140218001”,因为它有一个 DefiningQuery,而 <ModificationFunctionMapping& ...

  2. DELPHI XE2 采用 JSON 的方式来序列化对象

    DELPHI XE2 采用 JSON 的方式来序列化对象 以下代码测试通过.问题是里面的中文,在反序列化后是乱码. 1. 序列化对象为字符串,Subject 里面的中文看起来正常,仍然是中文: 2.  ...

  3. .Net Random产生随机数

    之前用winform做过有个摇奖游戏,其中中奖条件为产生的两个随机数一致则中奖,测试发现每次都会中奖. 忘记方式是怎么解决的了,今天看到了传智论坛的一片文章也是关于Random的,就点进去看了,它里面 ...

  4. Android应用开机自启动问题

    本文主要介绍Android应用如何实现开机自启动.自启动失败的原因以及通过ADB命令模拟发送BOOT_COMPLETED开机广播. 1.Android应用如何实现开机自启动 (1) 实现一个广播类,接 ...

  5. Linux之mysql安装

    查看文件内容的命令有很多:cat, tac, more, less, head, tail, nl. cat由第一行开始显示档案内容:tac从最后一行开始显示,可以看出tac是cat的倒着写:more ...

  6. 利用消息机制实现VC与Delphi之间的通讯（发送自定义消息）

    摘要: 本文介绍了使用Windows消息机制实现由不同语言编制的程序之间的相互通讯.联系,并以当前较为流行的两种语言Microsoft Visual C++ 6.0和Borland delphi 5. ...

  7. 做了一个浏览指定文件格式的 TreeView（方便查看Source目录下的源码）

    unit DirTreeView; interface uses   SysUtils, Classes, Controls, Forms, ComCtrls; type   TDirTreeView ...

  8. 怎么看待php 面向对象思想

    面向对象的程序设计思路是现代程序设计由面向过程演变面向对象的必然趋势,所以面向对象的而设计思路必然有它不同的时代意义,必然有着不同面向过程的不同历史使命,而php 5以后成功添加面向对象的设计思路其实 ...

  9. kafka笔记4

    应用程序使用KafkaConsumer向Kafka订阅主题,并从订阅的主题上接收消息.Kafka消费者从属于消费者群组,一个群组里的消费者订阅的是同一个主题,每个消费者接收主题的一部分分区的消息. 一 ...

  10. 10-pymysql的应用

    import pymysql # user = input('请输入用户名:') # pwd = input('请输入密码:') # 1.创建连接 conn = pymysql.connect(hos ...