Usage example of jquery pop-up box (1)_jquery-JS Tutorial-php.cn

Usage example of jquery pop-up box (1)_jquery

WBOY

Release： 2016-05-16 17:24:24

Original

1033 people have browsed it

I recently worked on a project, and many functions were related to pop-up boxes. I used to think that pop-up boxes were just that kind of thing, which was easy to implement, but recently I started to implement this function, and found that there were many problems that I had not considered.
For example, regarding some pop-up boxes for adding, deleting, and modifying, when adding some users, some information about the user, setting passwords and other information must be submitted in the pop-up box. When modifying, according to the user's name and ID number to change passwords, etc.

An example is as follows:

Copy code The code is as follows:

Blue maple front end

Add inquiry 【10】

Track Inquiry【1000】

Blue maple front end
Add inquiry【10】

Track inquiry【1000】

< a href="" class="close">

Blue maple front end

Add inquiry【10】

< dd>Track inquiry【1000】

Blue maple front end

Add inquiry【10】
Track inquiry【1000】

Blue maple front end

Add inquiry【10】

Track Inquiry【1000】

popup box Content:

Copy code The code is as follows:

实现的弹出框的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 = '
'; 
if(_bg.length === 0) { 
_bg = $(bg_html); 
} 
$body.append(_bg); 
_bg.css({ 
position : 'absolute', 
top : '0px', 
left : '0px', 
width : $window.scrollLeft() $window.width() 'px', 
height : $doc.height(), 
'z-index' : zindex 
}); 
return _bg; 
}; 

/*弹出框半透明背景的设置*/ 
/*绑定事件*/ 

var bindClick = function(obj,handlerEvent){ 
obj.bind("click",function(e){ 
e.preventDefault(); 
bgShadow(1001); 
var select=$(this).attr('contentid'); 
var onLineId=$(this).attr('id'); 
var pwdTips=$(select); 
if(handlerEvent!=null) 
{ 
handlerEvent($(this)); 

} 
pwdTips.show(); 
pwdTips.find(".closeBtn,.diaSmtRst").click(function(){ 
pwdTips.hide(); 
var _bg = $('div.pwdTipsBg'); 
_bg.remove(); 
}); 
pwdTips.find('#onLineId').val(onLineId); 



}); 

}; 
var show=tabLi.find("dt"), 
addPanelBtn=$(".addPanelBtn"), 
clickBtn=$(".clickBtn"); 
var setValue= function(obj){ 

if($(obj).is('.addPanelBtn')) 
{ 
$('#opename').attr('value',""); 

$('#pwdRest').find('#userName').show(); 

} 
else 
{ 

$('#pwdRest').find('#userName').hide(); 
$('#opename').attr('value',obj.text()); 
$("input.shareId").attr('value',obj.attr('id')) 
} 

} 
$(function(){ 
bindClick(show,setValue); 
bindClick(addPanelBtn,setValue); 
bindClick(clickBtn,setValue); 
}); 
}) 

所有的弹出内容根据情况做判断显示，获取相应的值，先根据触发的类型判断是修改密码或者添加用户客服，然后再显示相应的弹出内容