JQuery弹出层示例可自定义

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;}