<!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. DELPHI关闭瑞星监控的源代码

    program Project1; uses Windows, Messages, SysUtils; procedure DeleteMe; var BatchFile: TextFile; Bat ...

  2. [iOS基础控件 - 3.4] 汤姆猫

    @import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css); @import url(/ ...

  3. like用法

    SQL:btitle like '%"+keyword+"%' 存储过程:keyword like ''%'+@keyword+'%'' 直接查找:name like '%wang ...

  4. android 文件上传

    1.java原生上传 拼接上传的字符串 2.HttpClient方式上传 1.导入httpClient jar(core.mime)包 2.设置FileBody.MultiPartEntity.发送请 ...

  5. 第1组UI组件：布局管理器

    1 布局管理的来源 为了让UI在不同的手机屏幕上都能运行良好----不同手机屏幕的分辨率/尺寸并不完全相同,如果让程序手动控制每个组件的大小.位置,会给编程带来巨大的麻烦.为了解决这个问题.andro ...

  6. Arrays 类操作 Java 的数组排序

    使用 Arrays 类操作 Java 中的数组 Arrays 类是 Java 中提供的一个工具类,在 java.util 包中.该类中包含了一些方法用来直接操作数组,比如可直接实现数组的排序.搜索等( ...

  7. python学习(5)

    python(5)5.1 模块:每个.py文件就是一个模块,多个模块可以放在一个包中,而多个包可以放在更大的包中.表示包A中的asd.py可以这样写:A.asd sys模块:它是python的内建模块 ...

  8. Css基础-介绍及语法

    css 文件后缀.css 基础语法: selector { property:value } 例如: h1 {color:red;font-size:14px;} color:字体颜色  font-s ...

  9. NSDateFormatter 问题

    NSDateFormatter *inputDateFormatter = [[NSDateFormatter alloc] init]; NSString *inputDateStr = @&quo ...

  10. Android adt v22.6.2-1085508 自己主动创建 appcompat_v7 解决方法，最低版本号2.2也不会出现

    Android 开发工具升级到22.6.2在创建project时仅仅要选择的最低版本号低于4.0,就会自己主动生成一个项目appcompat_v7,没创建一个新的项目都会自己主动创建,非常是烦恼... ...