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>
<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());
};
//关闭弹出层
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>
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_ ...
随机推荐
- android——fragment详解
在android开发过程中,如果使用到了导航栏.那么不可避免的就需要使用fragment来处理界面.闲着没事,就详解一下Framgent的使用方法吧. 难得写一次.本人 shoneworn shone ...
- javascript高级知识点——memoization
memoization是一种非常有用的优化技术,它缓存特定输入产生的相应结果.这样麻烦的查找和迭代计算可以尽可能的减少. 它基本的思想是针对特定的输入,已经计算过的结果都是通过缓存当中的数据直接返回而 ...
- JavaScript类的设计
[转载] Javascript与其他的面向对象语言不同,如C++,Java或PHP等.它并不是基于类的,而是基于原型的一种语言. 1.对象创建 在Javascript中创建一个类是非常容易的: var ...
- Oracle闪回详解
1.问题定义 闪回是dba做的工作.现在也可授权给某个用户. 闪回的定义:就是将用户错误的操作回恢到以前的状态.即使你的事务提交的commit. 如果你删除了一个表.Drop table(DDL) ...
- 无法启动计算机"."上的服务w3svc
在启动IIS服务的时候出现错误: 无法启动计算机"."上的服务w3svc 解决方法: /* 修复错误 运行命令提示符 fsutil resource setautoreset tr ...
- USB驱动开发
1.usb特点 2.usb class 3.
- jquery widget开发——核心框架
框架代码: $.widget("myns.myplugin", { //默认参数 options: { }, //初始化,控件生命周期内只运行一次 _init: function ...
- Echart 官网给的一个直观的事例
附录:一个直观的事例 查看更多实例 example,或者使用这个demo 或 ECharts单一文件引入作为你的模板 // 图表实例化------------------ // srcipt标签式引入 ...
- UVA 712 S-Trees
二叉树? 怒水~~ 注意一下查询与x值的对应关系就好~ #include <iostream> #include <cstring> #include <cstdio&g ...
- What does cmd /C mean? [closed] 关于nodejs的子进程部分
之前一直很不明白为什么 child_process.spawn(command[, args][, options]) shell <Boolean> | <String> I ...