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 相关文章推荐
jQuery 位置插件
Dec 25 Javascript
jquery tablesorter.js 支持中文表格排序改进
Dec 09 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
Feb 10 Javascript
js判断ie版本号的简单实现代码
Mar 05 Javascript
浅谈javascript中基本包装类型
Jun 03 Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
Aug 01 Javascript
AngularJS国际化详解及示例代码
Aug 18 Javascript
深入理解JavaScript继承的多种方式和优缺点
May 12 Javascript
js处理包含中文的字符串实例
Oct 11 Javascript
vue1.0和vue2.0的watch监听事件写法详解
Sep 11 Javascript
layui table复选框禁止某几条勾选的实例
Sep 20 Javascript
vue3.0中setup使用(两种用法)
Dec 02 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
PHP静态新闻列表自动生成代码
2007/06/14 PHP
WAMP环境中扩展oracle函数库(oci)
2015/06/26 PHP
php+flash+jQuery多图片上传源码分享
2020/07/27 PHP
兼容FireFox 的 js 日历 支持时间的获取
2009/03/04 Javascript
nodejs win7下安装方法
2012/05/24 NodeJs
点击按钮或链接不跳转只刷新页面的脚本整理
2013/10/22 Javascript
Javascript简单实现可拖动的div
2013/10/22 Javascript
AngularJS模块管理问题的非常规处理方法
2015/04/29 Javascript
javascript封装简单实现方法
2015/08/11 Javascript
JavaScript动态添加css样式和script标签
2016/07/19 Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
2016/10/17 Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
2017/06/13 Javascript
javascript实现Java中的Map对象功能的实例详解
2017/08/21 Javascript
为什么要使用Vuex的介绍
2019/01/19 Javascript
在Vue项目中,防止页面被缩放和放大示例
2019/10/28 Javascript
JS+css3实现幻灯片轮播图
2020/08/14 Javascript
angular8.5集成TinyMce5的使用和详细配置(推荐)
2020/11/16 Javascript
利用python实现简单的循环购物车功能示例代码
2017/07/05 Python
python smtplib模块自动收发邮件功能(一)
2018/05/22 Python
Django中celery执行任务结果的保存方法
2019/07/12 Python
python实现连连看辅助之图像识别延伸
2019/07/17 Python
Python使用uuid库生成唯一标识ID
2020/02/12 Python
Django 权限管理(permissions)与用户组(group)详解
2020/11/30 Python
selenium3.0+python之环境搭建的方法步骤
2021/02/01 Python
Spartoo葡萄牙鞋类网站:线上销售鞋履与时尚配饰
2017/01/11 全球购物
新西兰杂志订阅:isubscribe
2019/08/26 全球购物
如何实现一个自定义类的序列化
2012/05/22 面试题
英语系毕业生自荐信
2013/10/31 职场文书
劳动实践课感言
2014/02/01 职场文书
节约电力资源的建议书
2014/03/12 职场文书
商业融资计划书
2014/04/29 职场文书
毕业证委托书范文
2014/09/26 职场文书
社保转移委托书范本
2014/10/08 职场文书
2016年教师新年寄语
2015/08/18 职场文书
蓝天保卫战收官在即 :15行业将开展环保分级评价
2019/07/19 职场文书
Redis5之后版本的高可用集群搭建的实现
2021/04/27 Redis