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 表单验证扩展(四)
Oct 20 Javascript
js 剪切板应用clipboardData详细解析
Dec 17 Javascript
js实现简单计算器
Nov 22 Javascript
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
Nov 23 Javascript
Javascript函数中的arguments.callee用法实例分析
Sep 16 Javascript
ES6中Generator与异步操作实例分析
Mar 31 Javascript
浅谈angular4生命周期钩子
Sep 05 Javascript
Bootstrap Table实现定时刷新数据的方法
Aug 13 Javascript
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
mock.js实现模拟生成假数据功能示例
Jan 15 Javascript
在 Vue 中使用 JSX 及使用它的原因浅析
Feb 10 Javascript
Vue h函数的使用详解
Feb 18 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分页类代码
2013/04/02 PHP
一张表搞清楚php is_null、empty、isset的区别
2015/07/07 PHP
使用php实现从身份证中提取生日
2016/05/09 PHP
PHP删除字符串中非字母数字字符方法总结
2019/01/20 PHP
Jquery 一次处理多个ajax请求的代码
2011/09/02 Javascript
js 链式延迟执行DOME
2012/01/04 Javascript
select标签模拟/美化方法采用JS外挂式插件
2013/04/01 Javascript
引用外部脚本时script标签关闭的写法
2014/01/20 Javascript
JS中的form.submit()不能提交表单的错误原因
2014/10/08 Javascript
js表单提交和submit提交的区别实例分析
2015/12/10 Javascript
AngularJS使用ng-app自动加载bootstrap框架问题分析
2017/01/04 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
2017/08/07 Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
2019/10/15 Javascript
jquery实现垂直手风琴导航栏
2020/02/18 jQuery
[01:20]DOTA2更新全新英雄 天涯墨客现已加入游戏
2018/08/25 DOTA
[51:29]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python采用raw_input读取输入值的方法
2014/08/18 Python
Python中super()函数简介及用法分享
2016/07/11 Python
Python模块文件结构代码详解
2018/02/03 Python
Pycharm 设置自定义背景颜色的图文教程
2018/05/23 Python
python实现给scatter设置颜色渐变条colorbar的方法
2018/12/13 Python
Django发送邮件和itsdangerous模块的配合使用解析
2019/08/10 Python
django-orm F对象的使用 按照两个字段的和,乘积排序实例
2020/05/18 Python
python如何实时获取tcpdump输出
2020/09/16 Python
python 星号(*)的多种用途
2020/09/21 Python
使用HTML5的Canvas绘制曲线的简单方法
2015/09/08 HTML / CSS
HTML5表单验证特性(知识点小结)
2020/03/10 HTML / CSS
德国孕妇装和婴童服装网上商店:bellybutton
2018/04/12 全球购物
蔻驰意大利官网:COACH意大利
2019/01/16 全球购物
德国BA保镖药房中文网:Bodyguard Apotheke
2021/03/09 全球购物
项目经理的岗位职责
2013/11/23 职场文书
实习心得体会
2014/01/02 职场文书
临时用工协议书范本
2014/10/29 职场文书
出国留学英文自荐信
2015/03/25 职场文书
Python内置数据结构列表与元组示例详解
2021/08/04 Python
Python Numpy库的超详细教程
2022/04/06 Python