<!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. 【Mongodb】3.0 配置身份验证db.createUser（）说明

    原文地址:http://bbs.51cto.com/thread-1146654-1.html 定义: 创建一个数据库新用户用db.createUser()方法,如果用户存在则返回一个用户重复错误. ...

  2. (C/C++) Callback Function 回调（diao）函数

    原文: http://www.codeguru.com/cpp/cpp/cpp_mfc/callbacks/article.php/c10557/Callback-Functions-Tutorial ...

  3. RMAN_学习实验1_RMAN备份标准过程（案例）

    2014-12-23 Created By BaoXinjian

  4. PLSQL_PLSQL读和写CSV文件方式（案例）

    2012-01-06 Created By BaoXinjin

  5. alpha融合

    //alpha融合 //作者:sandy //时间:2015-10-6 //将一只狗的头像融合在蜗牛头上 #include <cv.h> #include <highgui.h> ...

  6. Python 结巴分词（1）分词

    利用结巴分词来进行词频的统计,并输出到文件中. 结巴分词github地址:结巴分词 结巴分词的特点: 支持三种分词模式: 精确模式,试图将句子最精确地切开,适合文本分析: 全模式,把句子中所有的可以成 ...

  7. python （7）读取整个目录的所有文件夹并存入

    一,提取出来一个文件夹中的所有文件名并存入到txt文件中 import os import sys reload(sys) sys.setdefaultencoding('utf-8') path = ...

  8. 在eclipse中下载包含子模块(Submodules)的git项目

    先将项目下载下来 , 这时由于是子项目的原因 , 下载的项目中不包含任何子项目 . 这时在eclipse的Git Repositories中 , 选中Submodules , 右键点击update即可 ...

  9. 15个IT技术人员必须思考的问题

    行内的人自嘲是程序猿.屌丝和码农,行外的人也经常拿IT人调侃,那么究竟是IT人没有价值,还是没有仔细思考过自身的价值? 1.搞IT的是屌丝.码农.程序猿? 人们提到IT人的时候,总会想到他们呆板.不解 ...

  10. Win7允许被ping

    我们可以通过命令行方式来执行入站 Ping 的规则是启用还是禁用,命令行如下: netsh firewall set icmpsetting 8 netsh firewall set icmpsett ...