使用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. 通过HTTP Header控制缓存

    我们经常通过缓存技术来加快网站的访问速度,从而提升用户体验.HTTP协议中也规定了一些和缓存相关的Header,来允许浏览器或共享高速缓存缓存资源.这些Header包括: Last-Modified ...

  2. 2013年最流行的php框架盘点

    2013年最流行的php框架盘点 PHP框架的发展背景 毫无疑问,Web框架技术在近几年已经得到了突飞猛进的发展和普及,在过去几年里,框架技术的普遍经历了比较大的完善过程,很大一部分可以归因于Ruby ...

  3. 如何自学PHP做一个网站 PHP可以做什么项目？网站 小程序 公众号能用PHP开发吗？

    很多想从事程序开发的人员,想自学一门语言,不知道从哪里下手学习,如何入门学习?今天我们就以PHP为例子,来讲述一下如何快速的学习一门开发语言,让你快速入门.PHP是一个什么语言?它能开发什么项目呢?下 ...

  4. Mybatis_One

    Mabatis的概述 JavaEE开发是分层的:表现层 业务层 持久层 框架(Framework)是整个或部分系统的可重用设计,表现为一组抽象构件及构件实例间交互的方法;另一种定义认为,框架是可被应用 ...

  5. python trojan development 2nd —— use python to send mail and listen to the key board then combine them

    请勿用于非法用途!!!!!本人概不负责!!!原创作品,转载说明出处!!!!! from pynput.keyboard import Key,Listener import logging impor ...

  6. 网关never_host设计

    never下app的host与api Never是纯c#语言开发的一个框架.host则是使用该框架开发出来的API网关,它包括了:路由.认证.鉴权.熔断,内置了负载均衡器Deployment:并且只需 ...

  7. linux 环境 安装jdk tomcat mysql git

    1.安装JDK 1.官方下载jdk,linux版本的rpm包 2.安装rz sz ----------编译安装 //安装 cd /tmp wget http://www.ohse.de/uwe/rel ...

  8. JavaWeb入门_模仿天猫整站Tmall_JavaEE实践项目

    Tmall_JavaEE 技术栈 Servlet + Jsp + Tomcat , 是Java Web入门非常好的练手项目 效果展示: 模仿天猫前台 模仿天猫后台 项目简介 关联项目 github - ...

  9. 长春理工大学第十四届程序设计竞赛（重现赛）L

    L.Homework Stream 题目链接:https://ac.nowcoder.com/acm/contest/912/L 题目 作为大珩班尖子生,小r每天有很多作业要完成,例如工图.工图和工图 ...

  10. 交叉编译多平台 FFmpeg 库并提取视频帧

    原文地址: 交叉编译多平台 FFmpeg 库并提取视频帧 交叉编译多平台 FFmpeg 库并提取视频帧 本文档适用于 x86 平台编译 armeabi.armeabi-v7a.arm64-v8a.x8 ...