php编辑jquery弹出窗,jquery弹出框的用法示例(一)

最近做一个项目，许多功能都是关于弹出框的，以前觉得弹出框就那一种，很容易实现，但是最近真的做起这个功能了，发现会有好多自己考虑不到的问题。

比如关于一些添加，删除，修改的弹出框，当添加一些用户的时候，弹出框里要提交一些关于用户的信息，设置密码等信息，当修改的时候，根据用户的名字和id号来修改密码等等。

例子如下：

• 蓝枫前端

  添加询盘【 10】

  跟踪询盘【 1000】

• 蓝枫前端

  添加询盘【 10】

  跟踪询盘【 1000】

• 蓝枫前端

  添加询盘【 10】

  跟踪询盘【 1000】

• 蓝枫前端

  添加询盘【 10】

  跟踪询盘【 1000】

• 蓝枫前端

  添加询盘【 10】

  跟踪询盘【 1000】

• 添加

弹出框内容：

用 户 名：

营销客服：

登录密码：

确认密码：

确认

取消

实现的弹出框的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);

});

})

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