JQuery弹出层示例可自定义


Posted in Javascript onMay 19, 2014

1、创建一个jsp页面,内容如下,js和css根据自己的实际情况而定

<%@ page language="java" contentType="text/html; charset=UTF-8" 
pageEncoding="UTF-8"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Insert title here</title> <link href="Share.css" rel="stylesheet" type="text/css"> 
<script type="text/javascript" src="../js/common/jquery-1.11.0.js"></script> 
<script type="text/javascript" src="popup.js"></script> 
<script type="text/javascript" src="testPopup.js"></script> 
</head> 
<body> 
<div id="right"> 
<div class="right_nav"> 
<h1>用户管理</h1> 
<a href="#" onclick="" class="but_tj">添加</a> 
</div> 
<div class="overlay" id="spm" style="display: none;"></div><!-- 将弹出层下面的页面变成不可操作状态,成半透明状态 --> 
<div class="Popup" style="display: none">,<!-- 隐藏div --> 
<div class="Popup_top"> 
<h1>添加</h1> 
<a href="#" class="Close"><img alt="关闭" src="close.png" /></a> 
</div> 
<div class="Popup_cen"> 
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="BD_tab"> 
<tr> 
<td style="width: 110px;" align="right">姓名:</td> 
<td><input name="" id="name" type="text" class="input220" 
onfocus="this.className='input220L';this.onmouseout=''" 
onblur="this.className='input220';this.onmouseout=function(){this.className='input220'};" 
onmousemove="this.className='input220Lg'" 
onmouseout="this.className='input220'"> <font color="red">*</font></td> 
</tr> 
<tr> 
<td align="right">昵称:</td> 
<td><input name="" id="nickname" type="text" class="input220" 
onfocus="this.className='input220L';this.onmouseout=''" 
onblur="this.className='input220';this.onmouseout=function(){this.className='input220'};" 
onmousemove="this.className='input220Lg'" 
onmouseout="this.className='input220'"> <font color="red">*</font></td> 
</tr> 
<tr> 
<td style="width: 110px;" align="right">账号:</td> 
<td><input name="" id="account" type="text" class="input220" 
onfocus="this.className='input220L';this.onmouseout=''" 
onblur="this.className='input220';this.onmouseout=function(){this.className='input220'};" 
onmousemove="this.className='input220Lg'" 
onmouseout="this.className='input220'"> <font color="red">*</font></td> 
</tr> 
</table> 
</div> 
</div> 
</div> 
</body> 
</html>

2、公用的带有弹出层和关闭层的两个方法
//popup layer 
function isIE(num){ 
var num = num || "", 
tester = document.createElement('div'); 
tester.innerHTML = '<!--[if IE ' + num + ']><i></i><![endif]-->'; 
return !!tester.getElementsByTagName('i')[0]; 
} 
function popupLayer(objClass,targetClass){ 
$("."+objClass).click(function(){ 
$("#spm").show(); 
var target=$("."+targetClass); 
var targetWidth=target.outerWidth(); 
var targetHeight=target.outerHeight(); 
if(isIE(6)){ 
$("#spm").hide(); 
//$("select").hide(); 
var top=$(document).scrollTop()+$(window).height()/2; 
target.css({"top":top+"px"}); 
$(window).scroll(function(){ 
var top=$(document).scrollTop()+$(window).height()/2; 
target.css({"top":top+"px"}); 
}); 
} 
target.css({"margin-top":-parseInt(targetHeight/2)+"px","margin-left":-parseInt(targetWidth/2)+"px"}); 
target.show(); 
return false; }); 
} 
//隐藏div的操作 
function closeLayer(objClass,targetClass) 
{ 
$("."+objClass).click(function(){ 
$(this).parents("."+targetClass).hide(); 
$("#spm").hide(); 
}); 
}

3、1中调用3中js实现效果的js代码
$(function(){ 
//第一个参数是按钮的class属性值,第二个是被隐藏的div属性值 
popupLayer("but_tj","Popup"); 
closeLayer("Close","Popup"); 
}); //我们通过点击添加或修改按钮后使当前操作的div隐藏 
//closeAdd("Popup"); 
function closeAdd(targetClass){ 
$("."+targetClass).hide(); 
$("#spm").hide(); 
}

4、css样式
html {min-height: 100%;position: relative;overflow: hidden;} 
body {background-color: #FFF;font: 12px 微软雅黑, Arial, sans-serif;margin: 0;} 
h1 {font-size: 12px;font-size: inherit;font-weight: normal;} 
a {text-decoration: none;} 
a:hover {text-decoration: none;} 
.clear {overflow: hidden;clear: both;} 
#right {margin-left: 190px;min-height: 100%;padding: 0;} 
.right_top {height: 40px;background-color: #f5f5f5;color: #666666;border-bottom: 1px solid #e5e5e5;line-height: 40px;padding-left: 50px;position: relative;z-index: 1;} 
.right_top a {color: #2b7dbc;} 
.right_nav {margin: 0 30px;height: 37px;background-color: #438eb9;line-height: 37px;position: relative;margin-top: 15px;} 
.right_nav h1 {font-size: 18px;color: #ffffff;padding-left: 20px;} 
.but_tj {width: 68px;height: 27px;display: block;position: absolute;top: 7px;right: 30px;background: url(but_JG.png) no-repeat;text-align: center;line-height: 27px;font-size: 14px;color: #FFF;} 
.but_tj:hover {background: url(but_JG1.png) no-repeat;} 
.pind20 {padding-left: 20px;} 
/*Popup*/ 
.Popup {width: 770px;height: 500px;position: absolute;left: 50%;top: 50%;margin-left: -400px;padding: 0 15px;margin-top: -250px;background-color: #FFF;border: 3px solid #006caa;z-index: 999;} 
.Popup_top {height: 40px;line-height: 40px;border-bottom: 1px solid #cccccc;} 
.Popup_top h1 {float: left;font-size: 14px;} 
.Close {float: right;font-family: Arial, Helvetica, sans-serif;margin-right: 10px;margin-top: 10px;} 
.Popup_cen {padding-top: 10px;width: 100%;height: 440px;overflow: auto;} 
.Popup_audit {padding-top: 10px;width: 100%;height: 440px;} 
.overlay {position: fixed;z-index: 990;width: 100%;height: 100%;top: 0;left: 0;filter: alpha(opacity = 60);opacity: 0.6;overflow: hidden;background-color: #000;} 
/*BD_tab*/ 
.BD_tab {width: 500px;margin: 0 auto;} 
.BD_tab td {padding-top: 12px;} 
.input220,.input220L,.input220Lg {width: 220px;height: 28px;border: 1px solid #d3d3d3;padding-left: 5px;line-height: 28px;font-family: "微软雅黑";color: #000;} 
.input220L {border: 1px solid #377bcb;background-color: #d5e8ff;} 
.input220Lg {border: 1px solid #7fb1eb;background-color: #d8e6f7;} 
.input220 {border: 1px solid #d3d3d3;}

效果如下图
JQuery弹出层示例可自定义
Javascript 相关文章推荐
javascript笔试题目附答案@20081025_jb51.net
Oct 26 Javascript
js一组验证函数
Dec 20 Javascript
JS中处理与当前时间间隔的函数代码
May 23 Javascript
详解JavaScript中shift()方法的使用
Jun 09 Javascript
win7下安装配置node.js+express开发环境
Dec 06 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
Apr 17 Javascript
BOM系列第一篇之定时器setTimeout和setInterval
Aug 17 Javascript
AngularJs表单验证实例代码解析
Nov 29 Javascript
JS实现重新加载当前页面
Nov 29 Javascript
js中的闭包学习心得
Feb 06 Javascript
《javascript少儿编程》location术语总结
May 27 Javascript
vue使用require.context实现动态注册路由
Dec 25 Vue.js
textarea焦点的用法实现获取焦点清空失去焦点提示效果
May 19 #Javascript
js跨域访问示例(客户端/服务端)
May 19 #Javascript
jquery 表格排序、实时搜索表格内容(附图)
May 19 #Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
May 19 #Javascript
jQuery filter函数使用方法
May 19 #Javascript
用js模拟struts2的多action调用示例
May 19 #Javascript
从零学JS之你需要了解的几本书
May 19 #Javascript
You might like
改德生G88 - 加装等响度低音提升电路
2021/03/02 无线电
综合图片计数器
2006/10/09 PHP
php获取文件夹路径内的图片以及分页显示示例
2014/03/11 PHP
ThinkPHP入库出现两次反斜线转义及数据库类转义的解决方法
2014/11/04 PHP
windows中为php安装mongodb与memcache
2015/01/06 PHP
PHP数组操作简单案例分析
2016/10/15 PHP
jQuery jcrop插件截图使用方法
2013/11/20 Javascript
Jquery遍历节点的方法小集
2014/01/22 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
2014/10/17 Javascript
jQuery函数map()和each()介绍及异同点分析
2014/11/08 Javascript
JS操作HTML自定义属性的方法
2015/02/10 Javascript
JavaScript获取按钮所在form表单id的方法
2015/04/02 Javascript
javascript数组去重方法汇总
2015/04/23 Javascript
JS+CSS相对定位实现的下拉菜单
2015/10/06 Javascript
node.js require() 源码解读
2015/12/13 Javascript
jQuery视差滚动效果网页实现方法经验总结
2016/09/29 Javascript
JS限定手机版中图片大小随分辨率自动调整的方法
2016/12/05 Javascript
浅谈Node框架接入ELK实践总结
2019/02/22 Javascript
详解vue-cli中使用rem,vue自适应
2019/05/06 Javascript
原生JS与CSS实现软件卸载对话框功能
2019/12/05 Javascript
Python的for和break循环结构中使用else语句的技巧
2016/05/24 Python
Python实现 多进程导入CSV数据到 MySQL
2017/02/26 Python
Python解析命令行读取参数--argparse模块使用方法
2018/01/23 Python
python使用socket创建tcp服务器和客户端
2018/04/12 Python
Django 跨域请求处理的示例代码
2018/05/02 Python
python绘制多个曲线的折线图
2020/03/23 Python
python+ffmpeg批量去视频开头的方法
2019/01/09 Python
Python更换pip源方法过程解析
2020/05/19 Python
深入了解Python 变量作用域
2020/07/24 Python
英国最大的自有市场,比亚马逊便宜:Flubit
2019/03/19 全球购物
学习心得体会
2014/01/01 职场文书
对祖国的寄语大全
2014/04/11 职场文书
煤矿安全生产月活动总结
2014/07/05 职场文书
县长“四风”对照检查材料思想汇报
2014/10/05 职场文书
python实现简单石头剪刀布游戏
2021/10/24 Python
Windows Server 2008 修改远程登录端口以及配置防火墙
2022/04/28 Servers