<!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="/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>

JQuery弹出层，实现弹层切换，可显示可隐藏。的更多相关文章

  1. Jquery和Javascript 实际项目中写法基础-弹出窗和弹出层 (4)

     一.实际项目中有很多如下界面效果.    二.该效果可以归结为弹出窗或者弹出层来实现的,为什么这么说?看如下代码:      <!DOCTYPE html> <html> & ...

  2. 弹出框、遮罩层demo

    仿alert.confirm的弹出框. 弹出后,用遮罩层将背景虚化. 代码如下: <html> <meta http-equiv="Content-Type" c ...

  3. selenium获取新页面标签页（只弹出一个新页面的切换）

    selenium获取新页面标签页(只弹出一个新页面的切换) windows = driver.current_window_handle #定位当前页面句柄 all_handles = driver. ...

  4. layer弹出框确定前验证:弹出消息框(弹出两个layer)

    作者QQ:1095737364 QQ群:123300273 欢迎加入! layer 弹出框中经常遇到要弹出表单进行修改数据, 因此在弹出框中的表单需要验证数据, 就需要在弹出一个layer, 默认的设 ...

  5. 关于Android 打开新的Activity 虚拟键盘的弹出与不弹出

    关于Android 打开新的Activity 虚拟键盘的弹出与不弹出 打开Activity 时  在相应的情况 弹出虚拟键盘 或者 隐藏虚拟键盘 会给用户非常好的用户体验 , 实现起来也比较简单 只需 ...

  6. 【android】禁止Edittext弹出软键盘而且使光标正常显示

    /** * 禁止Edittext弹出软件盘,光标依旧正常显示. */ public void disableShowSoftInput() { if (android.os.Build.VERSION ...

  7. jQuery地图热点效应-后在弹出的提示鼠标层信息

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  8. html弹出窗并用遮罩层的实例

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

  9. 点击图片或者鼠标放上hover .图片变大. 1)可以使用css中的transition, transform 2) 预先设置一个 弹出div. 3)弹出层 alert ; 4) 浏览器的宽度document.documentElement.clientWidth || document.body.clientWidth

    变大: 方法一: 利用css属性. 鼠标放上 hover放大几倍. .kecheng_02_cell_content img { /*width: 100px; height: 133px;*/ wi ...

  10. form异步无刷新提交,提交后可以显示弹出框,否则弹出框会被刷新不见,使用 preventDefault

    出错点:确认按钮上.加onclick事件.每次点击都会追加给form追加on监听方法.累加on方法,重复提交 suppress_exception:true 阻止异常 (百度推送 jdk) 向下按 p ...

随机推荐

  1. hdoj 2098 分拆素数和

    分拆素数和 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...

  2. 转载 DevOps的基本原则与介绍

    转载原地址:  http://www.cnblogs.com/wintersun/p/3339047.html DevOps的基本原则与介绍 DevOps这个术语是developer与operatio ...

  3. MongoDB让人恶心的配置

    dbpath.logpath必须指定到硬盘的根目录: dbpath=D:\data\dblogpath=D:\data\log\Mongodb.log 不然启动时会报没有设置dbpath的错误

  4. docker——Dockerfile创建镜像

    写在前面: 继续docker的学习,昨天用docker成功跑了tomcat,但是在centos中镜像跑的容器手动装jdk和tomcat,今天学习用Dockerfile创建镜像,并在上面搭建java环境 ...

  5. ecshop中index.dwt文件分析

    对于ecshop新手来说,这篇总结值得关注. 对于没有web编程基础的同学来说,ecshop模板里面有两个文件特别重要, 但是这两个文件同时也很不好理解,分别是index.dwt和style.css. ...

  6. iOS UDID和UUID详解

    这篇是普及知识来了,纯属消遣时间,有需要的可以遛一遛. UDID的全名为 Unique Device Identifier :设备唯一标识符.从名称上也可以看出,UDID这个东西是和设备有关的,而且是 ...

  7. linux IO诊断命令集

    IO.sh ##iostat是查看磁盘活动统计情况 ##显示全部设备负载情况 r/s: 每秒完毕的读 I/O 设备次数.即 rio/s:w/s: 每秒完毕的写 I/O 设备次数.即 wio/s等 io ...

  8. jquery处理单击和双击事件

    今天做div点击时,需要用到同一div的单击和双击事件,出现问题如下 例子: Html <body> <div id="div_1">单击双击我</d ...

  9. iOS7 设置隐藏状态栏（status bar）

    在info.plist 添加 UIViewControllerBasedStatusBarAppearance(View controller-based status bar appearance) ...

  10. OpenCms Application dev-ref

    OpenCms Application Overview Before undertaking development, it will be helpful to understand the ba ...