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实现的在当前窗口中漂浮框的代码
Mar 15 Javascript
使用js+jquery实现无限极联动
May 23 Javascript
登陆成功后自动计算秒数执行跳转
Jan 23 Javascript
百度判断手机终端并自动跳转js代码及使用实例
Jun 11 Javascript
通用javascript代码判断版本号是否在版本范围之间
Nov 29 Javascript
Javascript下拉刷新的简单实现
Feb 14 Javascript
Javascript实现一朵从含苞到绽放的玫瑰
Mar 30 Javascript
JS 封装父页面子页面交互接口的实例代码
Jun 25 Javascript
vue实现中部导航栏布局功能
Jul 30 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
Sep 18 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
Mar 02 Javascript
JavaScript中CreateTextFile函数
Aug 30 Javascript
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
DC漫画《蝙蝠侠和猫女》图透 猫女怀孕老爷当爹
2020/04/09 欧美动漫
十天学会php(2)
2006/10/09 PHP
PHP个人网站架设连环讲(二)
2006/10/09 PHP
PHP中for与foreach的区别分析
2011/03/09 PHP
PHP程序开发范例学习之表单 获取文本框的值
2011/08/08 PHP
PHP实现将科学计数法转换为原始数字字符串的方法
2014/12/16 PHP
2020最新版 PhpStudy V8.1版本下载安装使用详解
2020/10/30 PHP
javascript 带有滚动条的表格,标题固定,带排序功能.
2009/11/13 Javascript
js中window.open()的所有参数详细解析
2014/01/09 Javascript
14款NodeJS Web框架推荐
2014/07/11 NodeJs
Jquery Post处理后不进入回调的原因及解决方法
2014/07/15 Javascript
JavaScript函数作用域链分析
2015/02/13 Javascript
js实现交换运动效果的方法
2015/04/10 Javascript
适用于javascript开发者的Processing.js入门教程
2016/02/24 Javascript
Bootstrap按钮组件详解
2016/04/26 Javascript
JavaScript兼容浏览器FF/IE技巧
2016/08/14 Javascript
D3.js实现饼状图的方法详解
2016/09/21 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
2017/01/13 Javascript
jQuery Ajax前后端使用JSON进行交互示例
2017/03/17 Javascript
详解用webpack2.0构建vue2.0超详细精简版
2017/04/05 Javascript
Vue 中使用 CSS Modules优雅方法
2018/04/09 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
2018/11/14 jQuery
[03:01]2014DOTA2国际邀请赛 小组赛7月13日TOPPLAY
2014/07/14 DOTA
easy_install python包安装管理工具介绍
2013/02/10 Python
使用Python导出Excel图表以及导出为图片的方法
2015/11/07 Python
Python基于scipy实现信号滤波功能
2019/05/08 Python
python高斯分布概率密度函数的使用详解
2019/07/10 Python
pytorch实现用CNN和LSTM对文本进行分类方式
2020/01/08 Python
html5生成柱状图(条形图)效果的实例代码
2016/03/25 HTML / CSS
英国百安居装饰建材网上超市:B&Q
2016/09/13 全球购物
《闻一多先生的说和做》教学反思
2014/04/28 职场文书
大学迎新标语
2014/06/26 职场文书
会计专业应届生自荐信
2014/06/28 职场文书
创业计划书之养殖业
2019/10/11 职场文书
Nginx开启Brotli压缩算法实现过程详解
2021/03/31 Servers
html+css实现滚动到元素位置显示加载动画效果
2021/08/02 HTML / CSS