<!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. Android的PackageManager的使用

    Android系统提供了很多服务管理的类,包括ActivityManager.PowerManager(电源管理).AudioManager(音频管理)以及PackageManager管理类.Pack ...

  2. php中遍历数组的方法

    参考网址:http://www.jb51.net/article/29949.htm 这三种方法中效率最高的是使用foreach语句遍历数组.从PHP4开始就引入了foreach结构,是PHP中专门为 ...

  3. myeclipse中，项目上有个叉报错，文件没有错误

    同事将他的java项目交接给了我.和平时的交接一样.他把他最新的源码.打成压缩包,发给我. 我解压后.使用myeclipse开发工具.通过导入,将项目导入到我的开发工具中.这个时候有一个问题出现了.在 ...

  4. dede 首页或列表页调用文章内容页body内容

    在使用dede过程,有的朋友会调调出文章的列表的内容出来,怎么调呢?当然是用dede的传参的数据查询语句了,方法如下: {dede:arclist flag=h typeid=2 row=1 titl ...

  5. uvalive4327（单调队列优化）

    这题我有闪过是用单调队列优化的想法,也想过有左右两边各烧一遍. 但是不敢确定,搜了题解,发现真的是用单调队列,然后写了好久,调了好久下标应该怎么变化才过的. dp[i][j] 表示走到第i行,第j个竖 ...

  6. 开源Office Word——DocX

    1.前言 请阅读前请看以下这位大神的文章 http://www.cnblogs.com/asxinyu/archive/2013/02/22/2921861.html 另附两个附件 1.DocX.DL ...

  7. Windows Phone开发（11）：常用控件（下）

    原文:Windows Phone开发(11):常用控件(下) WP控件大部分都可以从Silverlight中继承过来,这里我也只能拿一部分作演示,对于其它控件如何使用,可以参考SDK相关说明以及Sil ...

  8. linux下一个C语言flock功能使用 .

    表头文件  #include<sys/file.h> 定义函数  int flock(int fd,int operation); 函数说明  flock()会依參数operation所指 ...

  9. HTML5 Canvas鼠标与键盘事件

    演示HTML5 Canvas鼠标事件,获取Canvas对象上的鼠标坐标,演示键盘事件 通过键盘控制Canvas上对象移动. Canvas对象支持所有的JavaScript的鼠标事件,包括鼠标点击(Mo ...

  10. JSF教程（9）——生命周期之Process Validations Phase

    在这个过程其中JSF的实现者使用processValidators方法处理全部在tree中的组件中注冊的验证器.验证的过程就是通过每一个组件已有的规则对其已经保存的值进行校验,同一时候也对输入的值进行 ...