自己封装一个弹窗JS

在我们平时的开发中，一定有很多地方需要用到弹窗提示功能。而系统自带的弹窗奇丑无比，而且我们不能自主控制。因此我们在开发过程中，自己封装一个弹窗JS方便我们使用。

代码demo如下：

 // JavaScript Document
 /*var allWidth = $(".menuList")[0].offsetWidth;
 $(".menuList").height(allWidth*298/1400+"px");*/
 var aAlert=function(content,btn1Word,callback){

         //布局弹框格式
         $("body").append('<div class="alertZZ">'+
                 '<div class="aAlert">'+
                     '<p style="text-align:center;font-size: 18px;margin-top: 15px;color:#fd6234;margin-left: -20px;"><img src="/webapp/discussion/ChyAppH5/img/tip.png" style="width: 23px;position: relative;top: 4px;margin-right: 4px;">提示</p>'+
                     /*'<img src="/model/images/guanbi.png" class="guanbi"/>'+*/
                    '<div class="showWord">'+
                    '</div>'+
                    /*'<div class="btnDiv"><button id="btn1">确定</button></div>'+*/
                    '<div class="btnDiv">确 定</div>'+
                 '</div>'+
             '</div>'
         );

         //弹框样式调整
         $("body").css({'margin':'','padding':'','overflow':'hidden'});
         $(".mainDiv").css('overflow','hidden');
         $("img").css({/*width:100%;'display':'block',*/'border':'0px'});
         $(".alertZZ").css({
                 'width':'100%','height':'100%','position':'fixed',
                 'background':'rgba(0,0,0,0.25)','top':'','left':'','overflow':'hidden',
                 'z-index':''
         })
         $(".alertZZ .aAlert").css({
                 'width':'260px','background':'#FFF','position':'absolute',
                 'margin':'auto','background':'#FFF','z-index':'',
                 'border-radius':'5px'
         });
         $(".alertZZ .aAlert .guanbi").css({'float':'right','margin':'10px 10px auto auto','padding':'10px','cursor': 'pointer'})
         $(".alertZZ .aAlert .showWord").css({
                 'padding':'0 15px','color':'#7d7d7d','margin':'15px auto 30px auto',
                 'overflow':'hidden','line-height':'22px',
                 'font-size':'14px','text-align':'center'
         })
         $(".alertZZ .aAlert #btn1").css({
                 'width':'100px','background':'#263552',
                 'color':'#FFF','border':'0px','height':'36px',
                 'line-height':'36px','display':'block',
                 'font-size':'14px','letter-spacing':'2px',
                 'margin':'auto','font-family':'微软雅黑','outline': 'none'
         })
         $(".alertZZ .aAlert .btnDiv").css({
                 'background':'#fd6234','margin':'20px auto auto auto',
                 'text-align':'center','width':'100%','padding':'10px 0',
                 'color':'#fff','border-bottom-left-radius':'5px',
                 'border-bottom-right-radius':'5px'
         });

         //弹框居中显示
         //alert("12"+document.documentElement.clientHeight);

             /*
             var alertLeft=window.innerWidth/2-$(".aAlert").outerWidth()/2,
                 alertTop=window.innerHeight/3-$(".aAlert").outerHeight()/3;
             $(".alertZZ .aAlert").css({'left':alertLeft+'px','top':alertTop+'px'});
             */
             var alertLeft=window.innerWidth/-$(".aAlert").outerWidth()/,
                 alertTop=window.innerHeight/-$(".aAlert").outerHeight()/;
         $(".alertZZ .aAlert").css({'left':alertLeft+'px','top':alertTop+'px'});
         //添加弹框的内容
         $(".alertZZ .aAlert .showWord").html(content);
         if(btn1Word!=""){
             $(".alertZZ .aAlert #btn1").html(btn1Word);
         }

         //alert($(".showWord").html());
         var str=$(".showWord").html();
         //获取该div包含字符的个数
         var strLength = ;
         for(var i = ;i < str.length; i++){
           if(str.charCodeAt(i) > ) //如果是汉字，则字符串长度加2
              strLength += ;
           else
              strLength++;
         }
         //alert(strLength);
         if(strLength>){$(".showWord").css('text-align','left');}

         //点击关闭按钮和这灰色的遮罩层，关闭弹框
          $(".alertZZ .aAlert .btnDiv").click(function (){
              $("body").css('overflow-y','auto');
              $(".mainDiv").css('overflow-y','auto');
              $(".alertZZ").remove();
             //$(".alertZZ .aAlert").hide();
             if($(".alertZZ .aAlert").hide()&&$(".alertZZ").hide()){
                 //callback();
             }
          });
     $(".alertZZ .guanbi").click(function (){
         $("body").css('overflow-y','auto');
          $(".mainDiv").css('overflow-y','auto');
         $(".alertZZ").remove();
         //$(".alertZZ .aAlert").hide();
     });

 }

如果在开发的过程中，我们需要点击弹窗上的按钮后，程序再按照我们的需求走下去。我们还可以在相应的页面写JS控制，如点击确认后再跳转页面。

附上代码：

 $.ajax({
         url:url+"/******.do?method=******",
         type:"post",
         data:datas,
         dataType:"json",
         cache:false,
         ifModified:true,
         success:function(data){
             aAlert("提交成功！");
             $(".btnDiv").click(function(){
                 location.href = "www.baidu.com";
             })
         }
 });

注意：其中 btnDiv 是弹窗中确定按钮的类名。

处不住的，只能遗弃；盼不来的，只能放弃；留不住的，只能终止。人生，就是这样，选择不易，放弃艰难。人生之苦，苦在选择，人生之难，难在放弃。人生，说到底，就是选择与放弃。