JavaScript封装 弹出框

本文转自：https://blog.csdn.net/qq3401247010/article/details/78005380

<button>点击跳转</button>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
   $("button").click(function(){
       // myAlert("提示信息！");

       // myAlert("跳转到其他页面?",function(f){
       //     if(f){
       //         window.open("http://www.baidu.com");
       //     }
       // });

       myAlert("是否跳转到百度页面?",function(f){
           if(f){
               window.open("http://www.baidu.com");
           }
       },true);
   })

   function myAlert(str,click,useCancel){
       var overflow="";
       var $hidder=null;
       var clickHandler=click||$.noop;
       var myClickHandler=function(){
           $hidder.remove();
           $("body").css("overflow",overflow);
           clickHandler($(this).html()=="确定");
       };
       var init=function(){
           $hidder = $("<div style='width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:1000;text-align: center;position:fixed;left:0;top:0;'></div>");
           var $myalert = $("<div style='width:300px;position:absolute;top:30%;left:50%;margin-left:-150px;padding:20px;background:#fff;border-radius:5px;'>"+
               "<div style='padding-bottom:10px;border-bottom:1px solid #e5e5e5;font-size:20px;color:#f83;'>温馨提示</div></div>").appendTo($hidder);
           $("<div style='padding:10px 0;color:#333;border-bottom:1px solid #e5e5e5;'>"+str+"</div>").appendTo($myalert);
           var $myalert_btn_div = $("<div style='padding-top:10px;'></div>").appendTo($myalert);
           var $okBtn = $("<div style='float:left;width:100%;color:#eee;border-radius:2px;padding:7px 0;background: #abcdef;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;' class='bluebg1'>确定</div>").appendTo($myalert_btn_div).click(myClickHandler);
           if(useCancel){
               $okBtn.css({"width":"50%","border-right":"5px solid #fff"});
               $("<div style='float:left;width:50%;border-left:5px solid #fff;border-radius:2px;padding:7px 0;color:#fff;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;background:#ccc;'>取消</div>").appendTo($myalert_btn_div).click(myClickHandler);
           }
           overflow=$("body").css("overflow");
           $("body").css("overflow","hidden").append($hidder);
       };
       init();
   }
</script>