<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

hello world

</div>

</body>

</html>

版权声明：本文博主原创文章。博客，未经同意不得转载。

div+js 弹出层的更多相关文章

  1. js弹出层

    js弹出层 1.div附近显示 <div id="message"></div> $().delay().hide(); 2.遮罩层 表单提交后遮住页面,等 ...

  2. js弹出层的写法实例

    点击后弹出界面,通过判断浏览器长宽自动设定页面宽度和登陆页面位置. <style> /*遮罩层 弹出层*/ .mask { width: 100%; background-color: r ...

  3. div滚动条弹出层效果 （所需要的css文件和js文件，都已经上传到文件里面了progressbar.rar）

    <%--总的弹出层--%> <div class="tcck" id="joinclub" style="display:none& ...

  4. jquery.blockUI.2.31.js 弹出层项目介绍

    {insert_scripts files='user.js'} <style type="text/css"> #float_login{border:1px sol ...

  5. js 弹出层，以及在javascript里定义层样式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 简单 JS 弹出层 背景变暗

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. JS弹出层制作，以及移动端禁止弹出层下内容滚动，overflow:hidden移动端失效问题

    HTML <div class="layer"> <div class="menu-list"> <span>社会</ ...

  8. Js弹出层，弹出框代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. JS 弹出层 定位至屏幕居中

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 在mysql数据库中关于日期时间字段的处理

    在mysql数据库中关于日期时间字段的处理 在开发中,日期时间字段一般有如下几种设计 假设要获取2013-08-15日到2013-08-16日之间的记录 1. 直接使用日期时间类字段 相关sql语句如 ...

  2. ORA-16525: the Data Guard broker is not yet available

    DGMGRL> disable configuration;ORA-16525: the Data Guard broker is not yet available Configuration ...

  3. spring的长处 ioc aop

    spring 的长处? 1.减少了组件之间的耦合性 ,实现了软件各层之间的解耦 2.能够使用easy提供的众多服务.如事务管理,消息服务等 3.容器提供单例模式支持 4.容器提供了AOP技术,利用它非 ...

  4. POJ3190 Stall Reservations 【贪婪】

    Stall Reservations Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 3106   Accepted: 111 ...

  5. freemarker导出word带图片

    导出word带图片 如果你需要在word中添加图片,那你就在第一步制作模板时,加入一张图片占位,然后打开xml文档,可以看到如下的一片base64编码后的代码: <w:binData w:nam ...

  6. 设置 zend studio 默认编码为UTF8

    今天用zend studio 打开文件时发现为乱码,这肯定是编码出了问题,我看了一下果然是编码出了问题,默认的是以GBK编码方式打开,我换utf8编码打开就好了,换编码打开的方法是: 1点击工具栏中的 ...

  7. 让CentOS系统时间同步

    CentOS系统时间同步的步骤如下: 新装的CentOS系统服务器可能设置了错误的,需要调整时区并调整时间. 如下是CentOS系统使用NTP来从一个时间服务器同步cp /usr/share/zone ...

  8. 二叉树的建立与遍历（山东理工OJ）

    题目描写叙述 已知一个按先序序列输入的字符序列,如abc,,de,g,,f,,,(当中逗号表示空节点).请建立二叉树并按中序和后序方式遍历二叉树,最后求出叶子节点个数和二叉树深度. 输入 输入一个长度 ...

  9. bellman_ford算法

    给定一个源点,求最短路径,那么存在以源点为根的最短路径树因为最短路径具有最优子结构的性质,所以我们可以先求出树的第一层,然后再求出树的第二层,以此类推bellman_ford算法就是按照这种思想求最短 ...

  10. Android该系统提供的服务--Vibrator(振子)

    Android该系统提供的服务--Vibrator(振子) --转载请注明出处:coder-pig Vibrator简单介绍与相关方法: watermark/2/text/aHR0cDovL2Jsb2 ...