JQuery弹出层示例可自定义_jquery

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

复制代码 代码如下:

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>

用户管理

添加

,

添加

姓名：	onfocus="this.className='input220L';this.onmouseout=''" onblur="this.className='input220';this.onmouseout=function(){this.className='input220'};" onmousemove="this.className='input220Lg'" onmouseout="this.className='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'"> *
账号：	onfocus="this.className='input220L';this.onmouseout=''" onblur="this.className='input220';this.onmouseout=function(){this.className='input220'};" onmousemove="this.className='input220Lg'" onmouseout="this.className='input220'"> *

2、公用的带有弹出层和关闭层的两个方法

复制代码 代码如下:

//弹出层
function isIE(num){
var num = num || "",
tester = document.createElement('div');
tester.innerHTML = '';
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() $ (窗口).height()/2;
target.css({"top":top "px"});
}
target.css({"margin- top":-parseInt(targetHeight/2) "px","margin-left":-parseInt(targetWidth/2) "px"});
target.show();
返回 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","弹出")

closeLayer("关闭","弹出")
});

//我们通过点击添加或修改按钮后使当前操作的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 {字体大小：12px;字体大小：继承;字体粗细：正常;}

a {文本装饰：无;}
a:hover {文本装饰：无;}
.clear {溢出：隐藏；清除：两者；}
#right {margin-left: 190px;min-height: 100%;padding: 0;}
.right_top {高度： 40 像素；背景颜色：#f5f5f5；颜色：#666666；边框底部：1 像素实心 #e5e5e5；行高：40 像素；左内边距：50 像素；位置：相对；z 索引：1；}
。 right_top a {颜色：#2b7dbc;}
.right_nav {边距：0 30px；高度：37px；背景颜色：#438eb9；行高：37px；位置：相对；边距顶部：15px；}
.right_nav h1 {字体大小：18px;颜色：#ffffff;padding-left：20px;}
.but_tj {宽度：68px；高度：27px；显示：块；位置：绝对；顶部：7px；右: 30px;背景: url(but_JG.png) no-repeat;文本对齐: center;行高: 27px;字体大小: 14px;颜色: #FFF;}
.but_tj:hover {背景: url (but_JG1.png) 不重复;}
.pind20 {padding-left: 20px;}
/*Popup*/
.Popup {宽度: 770px;高度: 500px;位置: 绝对;左: 50%;顶部: 50%;左侧边距: -400px;填充: 0 15px;顶部边距: -250px;背景颜色: #FFF;边框: 3px 实线 #006caa;z-index: 999;}
.Popup_top {高度：40px;行高：40px;边框底部：1pxsolid #cccccc;}
.Popup_top h1 {浮动：左;字体大小：14px;}
.关闭{浮动: right;font-family: Arial, Helvetica, sans-serif;margin-right: 10px;margin-top: 10px;}
.Popup_cen {padding-top: 10px;宽度: 100%;高度: 440px;溢出: 自动;}
.Popup_audit {padding-top: 10px;宽度: 100%;高度: 440px;}
.overlay {位置: 固定;z-index: 990;宽度: 100%;高度: 100 %;顶部: 0;左: 0;过滤器: alpha(不透明度 = 60);不透明度: 0.6;溢出: 隐藏;背景颜色: #000;}
/*BD_tab*/
.BD_tab {宽度: 500px;边距: 0 auto;}
.BD_tab td {padding-top: 12px;}
.input220,.input220L,.input220Lg {宽度: 220px;高度: 28px;边框: 1pxsolid #d3d3d3; padding-left: 5px;line-height: 28px;font-family: "微软雅黑";color: #000;}
.input220L {border: 1pxsolid #377bcb;background-color: #d5e8ff;}
.input220Lg {border: 1pxsolid #7fb1eb;background-color: #d8e6f7;}
.input220 {border: 1pxsolid #d3d3d3;}


效果如下图