jquery弹出框的用法示例(一)

<div class=”pwdTips” style=”display:none;” id=”pwdRest”>
<a class=”closeBtn” href=”javascript:;”></a>
<div class=”traDBox”>
<div class=”row” id=”userName”>
<div class=”label” >用 户 名：</div>
<div class=”cell”><input type=”text” class=”text” id=”name” name=”” value=””></div>
</div>
<div class=”row”>
<div class=”label” >营销客服：</div>
<div class=”cell”><input type=”text” class=”text” id=”opename” name=”” value=””></div>
<input type=”hidden” name=”” id=”onLineId”/>
</div>
<div class=”row”>
<div class=”label”>登录密码：</div>
<div class=”cell”><input type=”text” class=”text” id=”” name=”” value=””></div>
</div>
<div class=”row”>
<div class=”label”>确认密码：</div>
<div class=”cell”><input type=”text” class=”text” id=”” name=”” value=””></div>
</div>
<div class=”row”>
<div class=”dialogBtn”>
<button type=”submit” class=”diaSmtBtn”>确认</button>
<button type=”button” class=”diaSmtRst”>取消</button>
</div>
</div>
</div>
</div>

实现的弹出框的js

$(function(){
var $window = $(window),
$doc = $(document),
$body = $(‘body’);
//关于管理员添加删除的js代码
var tabLi=$(“.tabPanel”).find(“li”);
tabLi.hover(function(){
$(this).addClass(“hover”).siblings().removeClass(“hover”);
},function(){})
/*弹出框定位*/
$(window).scroll(function() {
var pwdTips =$(“.pwdTips”);
var height=pwdTips.height();
var width=pwdTips.width();
var bodyHieght=$(window).height() ;
var bodyWidth=$(window).width() ;
if(!pwdTips.is(“:hidden”)){
pwdTips.css({
position: “fixed”,
top: (bodyHieght-height)/2,
left:(bodyWidth-width)/2
});
}
});
/*弹出框定位结束*/
/*弹出框半透明背景的设置*/
var bgShadow = function(zindex) {
zindex = zindex?zindex:999;
var _bg = $(‘div.pwdTipsBg’),
bg_html = ‘<div class=”pwdTipsBg”></div>’;
if(_bg.length === 0) {
_bg = $(bg_html);