JQuery弹出层，实现弹层切换，可显示可隐藏。
<!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弹出层，实现弹层切换，可显示可隐藏。的更多相关文章
- Jquery和Javascript 实际项目中写法基础-弹出窗和弹出层 (4)
一.实际项目中有很多如下界面效果. 二.该效果可以归结为弹出窗或者弹出层来实现的,为什么这么说?看如下代码: <!DOCTYPE html> <html> & ...
- 弹出框、遮罩层demo
仿alert.confirm的弹出框. 弹出后,用遮罩层将背景虚化. 代码如下: <html> <meta http-equiv="Content-Type" c ...
- selenium获取新页面标签页（只弹出一个新页面的切换）
selenium获取新页面标签页(只弹出一个新页面的切换) windows = driver.current_window_handle #定位当前页面句柄 all_handles = driver. ...
- layer弹出框确定前验证:弹出消息框(弹出两个layer)
作者QQ:1095737364 QQ群:123300273 欢迎加入! layer 弹出框中经常遇到要弹出表单进行修改数据, 因此在弹出框中的表单需要验证数据, 就需要在弹出一个layer, 默认的设 ...
- 关于Android 打开新的Activity 虚拟键盘的弹出与不弹出
关于Android 打开新的Activity 虚拟键盘的弹出与不弹出 打开Activity 时 在相应的情况 弹出虚拟键盘 或者 隐藏虚拟键盘 会给用户非常好的用户体验 , 实现起来也比较简单 只需 ...
- 【android】禁止Edittext弹出软键盘而且使光标正常显示
/** * 禁止Edittext弹出软件盘,光标依旧正常显示. */ public void disableShowSoftInput() { if (android.os.Build.VERSION ...
- jQuery地图热点效应-后在弹出的提示鼠标层信息
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- html弹出窗并用遮罩层的实例
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 点击图片或者鼠标放上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 ...
- form异步无刷新提交,提交后可以显示弹出框,否则弹出框会被刷新不见,使用 preventDefault
出错点:确认按钮上.加onclick事件.每次点击都会追加给form追加on监听方法.累加on方法,重复提交 suppress_exception:true 阻止异常 (百度推送 jdk) 向下按 p ...
随机推荐
- <转>HTML中的table转为excel
转换html 中的table 为excel,firefox浏览器支持,代码如下 <%@ page language="java" contentType="text ...
- Delphi XE5 常用功具与下载
1.Delphi XE5 正式版 http://altd.embarcadero.com/download/radstudio/xe5/delphicbuilder_xe5_win.iso http: ...
- DOS/Windows下黑客攻防（一）——神秘黑客大曝光
一.认识神秘的黑客 谈到网络安全,人们不自觉间就会联想到黑客,人们往往会将他们同破坏网络安全.盗取用户账号.偷窃个人私密信息联系起来.其实黑客也有好坏之分,他们并不全是网络上的捣乱分子,其中也有一部分 ...
- centos 火狐浏览器安装adobe flash player插件
来个CentOS 6.3 为Firefox安装Flash插件教程 下载install_flash_player_11_linux.i386.tar.gz打包文件到本地 终端进入install_fl ...
- Java 判断是否为汉字 判断是否为乱码 判断字符串是否为双整型数字 整数 数字
/** * 判断是否为汉字 * * @param str * @return */ public static boolean isGBK(String str) { char[] ch ...
- PowerShell查询sql server
function Invoke-SQL1: function Invoke-SQL { param( [string] $DBServer, [string] $Database, [string] ...
- hdu 1712 ACboy needs your help 分组背包
转载请注明出处:http://blog.csdn.net/u012860063 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1712 Problem ...
- win8如何删除未知账户(s-1-5-21-2000478354-1390067357-725345543-1003）
今天突然发现从别处复制来的游戏压缩文件不能解压,并且以前把游戏文件都是放在该目录下的,以前局域网玩起游戏来老是不能作为主机,且不能下载局域网玩的RPG地图,以前就注意过这个未知账户(s-1-5-21- ...
- android125 zhihuibeijing 缓存
## 三级缓存 ## - 内存缓存, 优先加载, 速度最快 - 本地缓存(内存卡), 次优先加载, 速度快 - 网络缓存, 不优先加载, 速度慢,浪费流量 package com.itheima.zh ...
- Android 导入导出CSV，xls文件 .
1 . http://www.bangchui.org/read.php?tid=62 2 .http://blog.csdn.net/xinzheng_wang/article/details/77 ...