一些弹出框的用法事例（一）

2013-09-05

一些弹出框的用法例子（一）最近做一个项目，许多功能都是关于弹出框的，以前觉得弹出框就那一种，很容易实现，

一些弹出框的用法例子（一）

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

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

例子如下：

弹出框内容：

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

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

热点排行

Web前端

一些弹出框的用法事例（一）