<!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. Java文件分割

    package FileDemo; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStre ...

  2. 压缩UI深度的代码实现

    记录一下,或许同样使用深度的NGUI以后会用到. 目前的项目的UI是用Stage3D实现的,采用了类似NGUI填写深度来确定覆盖关系,但同时可以使用的深度是有一个固定范围的,导致的问题是如果UI过多深 ...

  3. React Native学习笔记-1：JSC profiler is not supported.(转载）

    运行react-native中Example下的UIEXPLORER Project 遇到虾面报错: 2016-03-21 14:12:18.941 [trace][tid:com.facebook. ...

  4. SQLite使用教程5 分离数据库

    http://www.runoob.com/sqlite/sqlite-detach-database.html SQLite 分离数据库 SQLite的 DETACH DTABASE 语句是用来把命 ...

  5. hadoop 1.2 集群搭建与环境配置

    一.虚拟机环境 见我的另一篇博客http://www.cnblogs.com/xckk/p/6000881.html, 需要安装JDK环境,centos下安装JDK可参考: http://www.ce ...

  6. linux下eclipse的安装

    Eclipse的安装http://java.sun.com/javace/downloads/index.jsp下载:Jdk-6u17-linux-i586.binhttp://www.eclipse ...

  7. squid 安装、配置、优化

    官方网站:http://www.squid-cache.org 下载路径:wget http://www.squid-cache.org/Versions/v3/3.0/squid-3.0.STABL ...

  8. Cocos2dx 小技巧（十一） 小人虽短，但能够旋转

    转眼五一就到了,放假三天应该做些什么呢?窝在家里钻研技术?写博客?no no no no,这样的"伤害"自己的方式实在让我无法忍受.本来和大学那伙人越好了一起去哪里玩玩,喝酒聊天啥 ...

  9. android常见错误-Unexpected namespace prefix "xmlns" found for tag LinearLayout

    有一次升级android开发工具后发现xml脚本出现错误“Unexpected namespace prefix "xmlns" found for tag LinearLayou ...

  10. Aizu 2302 On or Off dfs/贪心

    On or Off Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/contest/view.act ...