<!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title>jQuery弹出层效果</title>

     <meta content="网页特效,特效代码,jQuery,css特效,Js代码,广告幻灯,图片切换" name="keywords" />

     <meta content="jQuery弹出层效果，有关闭按钮，代码简单易懂，你可以随意修改弹出层的参数。" name="description" />

     <script src="/uploads/common/js/jquery-1.4.2.min.js" type="text/javascript"></script><!--  无jquery亦可 -->

     <!-- 用了两层,底层用来挡下界面元素,顶层用于显示

     而底层为了能遮住所有界面元素,所以用了100% -->

     <style>

     .black_overlay{

     display: none;

     position: absolute;

     top: 0%;

     left: 0%;

     width: 100%;

     height: 100%;

     background-color: black;

     z-index:1001;

     -moz-opacity: 0.8;

     opacity:.80;

     filter: alpha(opacity=80);

     }

     .white_content {

     display: none;

     position: absolute;

     top: 10%;

     left: 10%;

     width: 80%;

     height: 80%;

     border: 16px solid lightblue;

     background-color: white;

     z-index:1002;

     overflow: auto;

     }

     .white_content_small {

     display: none;

     position: absolute;

     top: 20%;

     left: 30%;

     width: 40%;

     height: 50%;

     border: 16px solid lightblue;

     background-color: white;

     z-index:1002;

     overflow: auto;

     }

     </style>

     <script type="text/javascript">

             //弹出隐藏层

             function ShowDiv(show_div,bg_div){

                 document.getElementById(show_div).style.display='block';

                 document.getElementById(bg_div).style.display='block';

                 var bgdiv = document.getElementById(bg_div); //无此亦可

                 bgdiv.style.width = document.body.scrollWidth;//无此亦可

                 // bgdiv.style.height = $(document).height();

                 $("#"+bg_div).height($(document).height()); // 无jquery亦可

             };

             //关闭弹出层

             function CloseDiv(show_div,bg_div)

             {

                 document.getElementById(show_div).style.display='none';

                 document.getElementById(bg_div).style.display='none';

             };

     </script>

 </head>

 <body>

     <input id="Button1" type="button" value="点击弹出层" onclick="ShowDiv('MyDiv','fade')" />

     <!--弹出层时背景层DIV-->

     <div id="fade" class="black_overlay"></div> <!-- 底层 -->

     <div id="MyDiv" class="white_content"> <!-- 弹出层 -->

         <div style="text-align: right; cursor: default; height: 40px;">

         <span style="font-size: 16px;" onclick="CloseDiv('MyDiv','fade')">关闭</span>

         </div>

         目前来说，我还是喜欢这个自己改造的弹出层。自己在项目中也用的是这个。

     </div>

 </body>

 </html>

引用自: http://www.cnblogs.com/yichengbo/archive/2012/03/12/2392630.html  (添加部分注释,修改部分格式)

JQuery弹出层，点击按钮后弹出遮罩层，有关闭按钮【转】的更多相关文章

  1. js实现点击按钮时显示弹框，点击按钮及弹框以外的区域时隐藏弹框

    转自https://blog.csdn.net/yimawujiang/article/details/86496936 问题:js实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框? 方案一 ...

  2. JQuery弹出层，点击按钮后弹出遮罩层，有关闭按钮

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  3. JS 点击按钮后弹出遮罩层，有关闭按钮

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  4. jeecg 弹出框 点击按钮回调父页面 返回值

    jeecg 弹出框 点击按钮回调父页面 返回值 <t:base type="jquery"></t:base> <t:base type=" ...

  5. JavaScript 弹出窗体点击按钮返回选择数据的实现

    首先是父页面的代码: <head runat="server"> <title>无标题页</title> <%-- <script ...

  6. jquery.cookie广告弹窗点击关闭后一天弹一次

    jquery.cookie广告弹窗点击关闭后一天弹一次 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...

  7. div悬浮在屏幕的中间及点击按钮关闭弹出框

    #fd { position: fixed; z-index: 999; width: 109px; height: 323px; top: 71%; right: 1%; margin: -50px ...

  8. JS实现单击按钮后弹出新的窗口页面

    点击按钮后,弹出指定大小的页面窗口. 效果图: 源码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...

  9. response 后刷新页面,点击按钮后，禁用该按钮

    一,正常的点击按钮后,将其灰显,全部执行完毕再正常显示. this.btnSave.Attributes.Add("onclick", "if (typeof(Page_ ...

随机推荐

  1. 安装phpredis扩展

    本文是根据菜鸟教程中的内容而写的,因为按照教程中做法来操作,中间遇到一些问题,我在centos6.5和ubuntu16.4中都遇到了,所以写在这里.强烈建议你先看完这篇博客,然后再操作,能省不少事. ...

  2. MySQL基础~~编程语法

    常量 数值 字符串:单引号或者双引号括起来.包括普通字符串或者日期格式的字符串. 布尔值:false(FALSE)对应数字值为0.true(TRUE)对应数字值为1. NULL:可以参考http:// ...

  3. [转帖] select、poll、epoll之间的区别总结[整理] + 知乎大神解答 https://blog.csdn.net/qq546770908/article/details/53082870 不过图都裂了.

    select.poll.epoll之间的区别总结[整理] + 知乎大神解答 2016年11月08日 15:37:15 阅读数:2569 http://www.cnblogs.com/Anker/p/3 ...

  4. CSS 范围选择器（自编）

    选择第一个到第六个li元素ul li:nth-child(n+3):not(:nth-child(n+6)){} 选择第二个到最后一个ul li:nth-child(2)~li{} 选择除了第一个和最 ...

  5. Linux基础学习（1）--Linux系统简介

    第一章——Linux系统简介 1.UNIX和Linux发展史: 1.1 unix发展史: (1)1965年,美国麻省理工学院(MIT).通用电气公司(GE)及AT&T的贝尔实验室联合开发Mul ...

  6. GlusterFS 增删节点及改变复制份数

    一.增加节点 1.需要主机添加到主机池中 gluster peer  probe server3 gluster peer  probe server4 2.查看状态 3.添加节点并复制2份(增加复制 ...

  7. ubuntu 16.04 samba服务搭建

    一:安装 1. sudo apt-get install samba 有询问Yes的地方Yes就行. 无法安装samba 执行 sudo apt-get update 2.等待安装完成,进入配置文件目 ...

  8. CF528D Fuzzy Search 【NTT】

    题目链接 CF528D 题解 可以预处理出\(S\)每个位置能匹配哪些字符 对每种字符 构造两个序列 如果\(S[i]\)可以匹配该字符,则该位置为\(0\),否则为\(1\) 如果\(T[i]\)可 ...

  9. luogu1345 奶牛的电信 (最小割)

    虽然割点不好搞,但是可以变成割边呀 拆点,拆出来的边权给1,原图中的边权给inf,然后跑dinic就行了 #include<bits/stdc++.h> #define pa pair&l ...

  10. BloodHound官方使用指南

    0x00  概观 1.BloodHound介绍 BloodHound是一种单页的JavaScript的Web应用程序,构建在Linkurious上,用Electron编译,NEO4J数据库是Power ...