复制代码 代码如下:
pageencoding=utf-8%>
insert title here
用户管理
添加
,
添加
姓名：
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、公用的带有弹出层和关闭层的两个方法
复制代码 代码如下:
//popup layer
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()+$(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;}
效果如下图