JQuery弹出层，点击按钮后弹出遮罩层，有关闭按钮【转】
<!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弹出层，点击按钮后弹出遮罩层，有关闭按钮【转】的更多相关文章
- js实现点击按钮时显示弹框，点击按钮及弹框以外的区域时隐藏弹框
转自https://blog.csdn.net/yimawujiang/article/details/86496936 问题:js实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框? 方案一 ...
- JQuery弹出层，点击按钮后弹出遮罩层，有关闭按钮
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
- JS 点击按钮后弹出遮罩层，有关闭按钮
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
- jeecg 弹出框 点击按钮回调父页面 返回值
jeecg 弹出框 点击按钮回调父页面 返回值 <t:base type="jquery"></t:base> <t:base type=" ...
- JavaScript 弹出窗体点击按钮返回选择数据的实现
首先是父页面的代码: <head runat="server"> <title>无标题页</title> <%-- <script ...
- jquery.cookie广告弹窗点击关闭后一天弹一次
jquery.cookie广告弹窗点击关闭后一天弹一次 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...
- div悬浮在屏幕的中间及点击按钮关闭弹出框
#fd { position: fixed; z-index: 999; width: 109px; height: 323px; top: 71%; right: 1%; margin: -50px ...
- JS实现单击按钮后弹出新的窗口页面
点击按钮后,弹出指定大小的页面窗口. 效果图: 源码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...
- response 后刷新页面,点击按钮后，禁用该按钮
一,正常的点击按钮后,将其灰显,全部执行完毕再正常显示. this.btnSave.Attributes.Add("onclick", "if (typeof(Page_ ...
随机推荐
- Python入门：如何使用第三方库？
这是关于Python的第13篇文章,也是关于<编程小白的第1本Python入门书>内容的最后一篇,主要介绍下如何使用第三方库. 1. 第三方库 Python相当于一个手机,第三方库相当于手 ...
- Oracle备份恢复简单过程以及中间的坑.
Oracle 冷备: 貌似需要dbca创建一致的oracle instance 服务器配置版本尽量相同,安装路径相同. 关闭Oracle服务 将oracle app 目录下的oradata以及有快速闪 ...
- Angular $location获取端口号
<!DOCTYPE html><html ng-app="myApp"><head lang="en"> <meta ...
- Metaspace 之一：Metaspace整体介绍（永久代被替换原因、元空间特点、元空间内存查看分析方法）
回顾 根据JVM内存区域的划分,简单的画了下方的这个示意图.区域主要分为两大块,一块是堆区(Heap),我们所New出的对象都会在堆区进行分配,在C语言中的malloc所分配的方法就是从Heap区获取 ...
- 转《trackingjs人脸检测》
tracking.js是一个开源(BSD协议)的计算机视觉插件,在不同的浏览器中有不同的计算机视觉算法和技术,通过使用现代HTML5规范,能够实现实时颜色跟踪.人脸检测等功能,界面直观.核心文件轻量. ...
- Mac 电脑 开发环境Idea环境搭建
1.应该把F1-->F9的快捷键禁用,不然调试的时候,需要走断点. ==>用手抓一下键盘==>到了桌面,然后==>点击系统偏好设置==>键盘==>键盘==>将 ...
- 在做销售录入界面时,如何使用dbgrid?(50分)
给你段源码看一看用stringgird做得: procedure Tfrmingoods.adddata ; var i:integer; begin do begin ,i])=trim(goods ...
- 文件IO流完成文件的复制(复杂版本主要用来演示各种流的用途，不是最佳复制方案哦)
package io; import java.io.BufferedReader;import java.io.BufferedWriter;import java.io.File;import j ...
- JUC-Condition线程通信
1,Codition接口描述了可能会与锁有关联的条件变量.这些变量在用法上与使用Object.wait访问的隐式监视器类似. 但提供了更强大的功能,需要指出的是,单个lock可能与多个conditio ...
- BZOJ3932[CQOI2015]任务查询系统——主席树
题目描述 最近实验室正在为其管理的超级计算机编制一套任务管理系统,而你被安排完成其中的查询部分.超级计算机中的 任务用三元组(Si,Ei,Pi)描述,(Si,Ei,Pi)表示任务从第Si秒开始,在第E ...