<!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. Android的Spinner

    使用Spinner遇到不少坑啊 3.自定义spinner样式 <style name="AppTheme" parent="Theme.AppCompat.Ligh ...

  2. 跟着Android官网学习Activity

    1.Activity介绍 An Activity is an application component that provides a screen with which users can int ...

  3. stm32f10x.h文件分析理解

    今天再看过半年前自己写的这篇发现自己当时理解有误,stm32f10x.h与库开发并未存在太大关系,只是一个最为重要的寄存器地址到寄存器结构体变量的映射. stm32f10x.h 这个头文件是STM32 ...

  4. CSS区块、浮动、定位、溢出、滚动条

    CSS中区块的使用 CSS中浮动的使用 CSS中定位的使用 CSS中溢出的使用 CSS中滚动条的使用 17.1 CSS中区块的使用 属性名称            属性值                ...

  5. 怎样在Java中实现基本数据类型与字符之间的转换

    摘要:在我们对Java的学习当中数据类型之间的转换,是我们常见的事,我们也都知道基本数据类型之间有自动转换和强制转换,在int   . short  . long .float .double之间的转 ...

  6. Android真机抓屏- Android Screen Monitor

    一般运行Android应用程序有两种方式一种是设置Android虚拟设备模拟器,通过Android  Virtual Manger进行管理,一种是插入USB数据线直接真机上进行调试,但是如果电脑配置比 ...

  7. SCOM随笔

    1.在监控群集资源时,安装完agent后,在代理管理-agent属性中选中“允许此代理充当代理并发现其他计算机上的托管对象” 如果监控DC的话,也要选中该选项

  8. Objective-C 调用C++,C

    1. 建立一个C++类 2. 写一个Adaptor的Objective-C类 3. 在其他Objective-C的逻辑中调用Adaptor类. 1.C++类 // // CPlusPlusClass. ...

  9. iOS开发笔记系列-基础3(多态、动态类型和动态绑定)

    多态:相同的名称,不同的类 使不同的类共享相同方法名称的能力成为多态.它让你可以开发一组类,这组类中的每一个类都能响应相同的方法名.每个类的定义都封装了响应特定方法所需要的代码,这使得它独立于其他的类 ...

  10. 日志文件C++ 时间 文件 行数

    #include <stdio.h> #include<windows.h> #include <time.h> #define Line __LINE__ #de ...