使用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. WebApi 中FromUri参数自动解析成实体的要求

    条件一:类属性名称必须和参数名称相同(不分大小写) 条件二:API参数必须以[FromUri]来修饰(数组也需要添加,否则参数传递不了) 条件三:属性类型为“类”的,如果使用类名(导航属性在本类的名称 ...

  2. sklearn文本特征提取——TfidfVectorizer

    什么是TF-IDF IF-IDF(term frequency-inverse document frequency)词频-逆向文件频率.在处理文本时,如何将文字转化为模型可以处理的向量呢?IF-ID ...

  3. QString之simplified()用于读取数据、规范数据，非常方便

    在工程项目开发中,遇到这么个问题:手工计入文件中的数据,每行有三个,前两个是数字,最后一个是标识,现在把这3个数据提取出来. 一提取就出现问题了:由于手工导入,数据间使用空白间隔,有可能是一个空格,有 ...

  4. Google C++测试框架系列高级篇：第一章 更多关于断言的知识

    原始链接:More Assertions 词汇表 现在你应该已经读完了入门篇并且会使用GTest来写测试.是时候来学一些新把戏了.这篇文档将教会你更多知识:用断言构造复杂的失败信息,传递致命失败,重用 ...

  5. php身份证号的验证

    //身份证号验证 03 protected function checkIdCard(){ 04 if(empty($_POST['idcard'])){ 05 return false; 06 } ...

  6. abp(net core)+easyui+efcore仓储系统——展现层实现增删改查之控制器（六）

    abp(net core)+easyui+efcore仓储系统目录 abp(net core)+easyui+efcore仓储系统——ABP总体介绍(一) abp(net core)+easyui+e ...

  7. github 上传更新代码（最简单的方法）

    1.首先你需要一个github账号,还没有的朋友先去注册一个吧! GitHub地址:https://github.com/ 我们使用git需要先安装git工具,这里给出下载地址,下载后一路直接安装即可 ...

  8. spring cloud 系列第7篇 —— sleuth+zipkin 服务链路追踪 (F版本)

    源码Gitub地址:https://github.com/heibaiying/spring-samples-for-all 一.简介 在微服务架构中,几乎每一个前端的请求都会经过多个服务单元协调来提 ...

  9. vuex分模块

    Vuex速学篇:(4)把我们的业务按模块分类 原创 2016年11月29日 10:45:38 8504 文档:http://vuex.vuejs.org/zh-cn/modules.html 这个mo ...

  10. 【Dubbo】Dubbo+ZK基础入门以及简单demo

    参考文档: 官方文档:http://dubbo.io/ duboo中文:https://dubbo.gitbooks.io/dubbo-user-book/content/preface/backgr ...