<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery弹出层效果</title>
<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弹出层效果的更多相关文章

  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. JQuery弹出层，点击按钮后弹出遮罩层，有关闭按钮【转】

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

  4. [转]jquery Fancybox丰富的弹出层效果

    本文转自:http://www.helloweba.com/view-blog-65.html Fancybox是一款优秀的jquery插件,它能够展示丰富的弹出层效果.前面我们有文章介绍了facyb ...

  5. jQuery WIN 7透明弹出层效果

    jQuery WIN 7透明弹出层效果,点击可以弹出一个透明层的jquery特效,插件可以调弹出框的宽度和高度,很不错的一个弹出层插件. 适用浏览器:IE8.360.FireFox.Chrome.Sa ...

  6. 效果非常好的 Jquery弹出层插件 jQuery Sweet alert

    介绍款交互性非常不错的jquery弹出层插件,支持消息提示.错误提示.确认框提示等. 交互式体验感非常不错,比如咱们现在体验非常不错的微信支付.支付宝等完成后的效果. 不过本插件至少支持IE9+ Jq ...

  7. Fancybox丰富的弹出层效果

    Fancybox是一款优秀的jquery插件,它能够展示丰富的弹出层效果.前面我们有文章介绍了facybox弹出层效果,相比facybox,fancybox显得功能更为齐全,它除了可以加载DIV,图片 ...

  8. 【jquery】fancybox 是一款优秀的 jquery 弹出层展示插件

    今天给大家分享一款优秀的 jquery 弹出层展示插件 fancybox.它除了能够展示图片之外,还可以展示 flash.iframe 内容.html 文本以及 ajax 调用,我们可以通过 css ...

  9. 使用JavaScript实现弹出层效果

    声明 阅读本文需要有一定的HTML.CSS和JavaScript基础 设计 实现弹出层效果的思路非常简单:将待显示的内容先隐藏,在触发某种条件后(如点击按钮),将原本隐藏的内容显示出来. 实现 < ...

随机推荐

  1. kvm最小磁盘大于等于5G

    上图的实验为4G(磁盘的大小) 后来磁盘大小增加到5G后,成功安装! [root@bass virhost]# virt-install --name 22cache --ram=512 --arch ...

  2. angular学习笔记(五)-阶乘计算实例(2)

    <!DOCTYPE html> <html ng-app> <head> <title>2.3.3计算阶乘实例2</title> <m ...

  3. 57. 3Sum【medium】

    Given an array S of n integers, are there elements a, b, c in S such that a + b + c = 0? Find all un ...

  4. python（21）实现多进程（1）

    参考链接:http://www.cnblogs.com/kaituorensheng/p/4445418.html python多进程:multiprocessing python中的多线程其实并不是 ...

  5. QT 4.8 静态库编译方法

    最最初踏上QT之路是受到了XiaomaGee的指点,相比于常规的窗口程序开发,QT有着以下特点: 1. 优良的跨平台特性(支持Win.Linux.Mac 不同的平台下只需重新编译即可使用) 2. 面向 ...

  6. servlet的编码原理

    编码问题: 在介绍编码问题前,先介绍一下java平台(JVM)上的编码转化情况.首先要说明的一点,在JVM中,即java平台上,运行的程序一定都是Unicode编码方式的.对于代码中的字符串常量,根据 ...

  7. python学习笔记（19）--PTVS的安装

    说明: 1. 折腾了两天eclipse,pydev,好不容易都弄好了,发现不会建工程,建完工程打不开,老是提示工作空间里有隐藏文件什么的,网上查了说是把.project里面的name标签的名字改了就行 ...

  8. Redis简述

    Redis 简单介绍 Redis 是全然开源免费的.遵守BSD协议,是一个高性能的key-value数据库. Redis 与其它 key - value 缓存产品有下面三个特点: Redis支持数据的 ...

  9. draw sin

    draw sin Steps 导入包 生成X轴,Y轴的数据点 设置输出图大小,像素,前景色 指定线宽,线型,绘制曲线 设置坐标轴范围 显示图形. Code #!/usr/bin/env python ...

  10. Hadoop的体系结构之MapReduce的体系结构

    MapReduce的体系结构 Hadoop MapReduce是一个使用简易的软件框架,基于它写出来的应用程序能够运行在上千个商用机器组成的大型集群上,并以一种可靠容错的方式并行处理上TB的数据集. ...