<!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>

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

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

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

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

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

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

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

  4. jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例

    本文实例讲述了jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能.分享给大家供大家参考,具体如下: 弹出层:两种方式 一是打开网页就自动弹出层二是点击弹出 <!DOCTYPE html ...

  5. 移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究

    PC端解决方案 pc端的解决思路就是在弹出遮罩层的时候取消已经存在的滚动条,达到无法滚动的效果. 也就是说给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加 ...

  6. jquery特效（7）—弹出遮罩层且内容居中

    上周写了几个小特效,其中有个点击按钮弹出遮罩层的特效,下面来看最终实现的效果: 由于是测试的程序,所以我未加关闭的按钮. 一.主体程序 <!DOCTYPE html> <html&g ...

  7. Css动画形式弹出遮罩层，内容区上下左右居中于不定宽高的容器中

    <!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...

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

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

  9. 【JS新手教程】浏览器弹出div层1

    JS中,可以弹出一个层来进行提示等作用,方法是利用css样式display样式,当display等于none时,该元素就不会在页面显示出来,而且元素也不会占空间.就是用户触发某些事件时,动态修改该样式 ...

随机推荐

  1. activiti自定义流程之Spring整合activiti-modeler5.16实例（七）：任务列表展示

    注:(1)环境搭建:activiti自定义流程之Spring整合activiti-modeler5.16实例(一):环境搭建        (2)创建流程模型:activiti自定义流程之Spring ...

  2. C++库大全(转)

    基础类1. Dinkumware C++ Library 参考站点:http://www.dinkumware.com P.J. Plauger编写的高品质的标准库.P.J. Plauger博士是Dr ...

  3. 灵活控制 Hibernate 的日志或 SQL 输出(包含参数)，以便于诊断

    首先参考:http://blog.csdn.net/zljjava/article/details/7534349  [灵活控制 Hibernate 的日志或 SQL 输出,以便于诊断] 我的具体配置 ...

  4. 值得推荐的C/C++框架和库 (真的很强大)

    值得学习的C语言开源项目 - 1. Webbench Webbench是一个在Linux下使用的非常简单的网站压测工具.它使用fork()模拟多个客户端同时访问我们设定的URL,测试网站在压力下工作的 ...

  5. PLSQL_性能优化系列03_Oracle Parallel并发处理

    2014-09-25 Created By BaoXinjian

  6. NeHe OpenGL教程 第十六课：雾

    转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...

  7. [实变函数]4.2 Egrov 定理

    1 一致收敛很重要, 但可惜的是很多时候不一致收敛. 比如 $$\bex f_n(x)=x^n\to f(x)=\sedd{\ba{ll} 0,&x\in [0,1)\\ 1,&x=1 ...

  8. yuv422/yuv420格式

    关于YUV格式 转载:http://www.cnblogs.com/soniclq/archive/2012/02/02/2335974.html YUV 格式通常有两大类:打包(packed)格式和 ...

  9. Linux中记录终端（Terminal）输出到文本文件（转载）

    一,如何把命令运行的结果保存到文件当中? 这个问题太简单了,大家都知道,用 > 把输出转向就可以了 例子: [lhd@hongdi ~]$ ls > ls.txt [lhd@hongdi ...

  10. StateMachine

    Create State Machine Create either a passive or an active state machine: ? 1 var fsm = new PassiveSt ...