純js h5 彈出框
阿新 • • 發佈:2019-02-02
win.MESSAGER2 = function(){ var self={}; var __myAnimationEnd="animationend webkitAnimationEnd"; var $__shadow, $__messager, $__middle, $__middle, $__bottom, __lockScroll = false; var __mWidth = (window.screen.width|| document.documentElement.clientWidth || document.documentElement.getBoundingClientRect().width) * 0.85; var __options={ title:"" ,content:"" ,showCancel:false ,cancelText:"取消" ,confirmText:"確定" ,success:null ,complete:null ,mode:"alert" ,duration:1500 ,mask:false ,showClose:true ,borderRadius:true ,borderRadiusClass:"border-radius" ,boxShadow:true }; function margeOptions(options){ JSONIntersection(__options, options); } function hide(){ if(__options.mode!="toast"){ $__messager.addClass("fadeOut").on(__myAnimationEnd,function end(){ $(this).removeClass("fadeOut").off(__myAnimationEnd,end); $__shadow.remove(); $__shadow=null; }); } else { $__shadow.remove(); $__shadow=null; } } function createMessager(){ $__messager = $("<messager2>"); __options.boxShadow&&$__messager.addClass("box-shadow"); __options.borderRadius&&$__messager.addClass(__options.borderRadiusClass); if(__options.mode =="alert" && __options.title){ $__messager.append($("<top>",{"html":__options.title})); } if(!__options.content){ $__messager.addClass("default-size") } if(__options.showClose&&__options.mode=="sticker") { var $btnClose = $("<btnClose>").appendTo($__messager); $btnClose.on(ctrlType,function(){ event&&event.stopPropagation(); if(__options.success || typeof __options.success == "function"){ __options.success.call(this) } hide(); }) } $__middle=$("<middle>",{"html":__options.content}); $__messager.append($__middle); if(__options.mode =="alert" && $__bottom){ $__messager.append($__bottom); } if(__options.mask){ $__shadow.addClass("mask"); } $__shadow.append($__messager); }; function show(){ createMessager(); $__shadow.addClass(__options.mode).addClass("show") if(__options.mode=="toast"){ if(__options.duration){ $__messager.css({"animation-duration":__options.duration+"ms","-webkit-animation-duration":__options.duration+"ms"}) } $__messager.on(__myAnimationEnd,hide).addClass("toast-fadeIn"); } else { $__messager.addClass("fadeIn").on(__myAnimationEnd,function end(){ $(this).removeClass("fadeIn").off(__myAnimationEnd,end); }); } if(__options.complete || typeof __options.complete == "function"){ __options.complete.call(this,self); } } function MESSAGER2(){ self.show=function(){ show(); } self.hide=function(){ hide(); } self.alert=function(options){ __options.mode="alert"; __options.mask=true; margeOptions(options); $__bottom = $("<bottom>"); if(__options.showCancel){ var $btnConfirm = $("<btn>",{class:"cancel",html:__options.cancelText}).attr("data-type","cancel"); $__bottom.append($btnConfirm); } var $btnConfirm = $("<btn>",{class:"confirm",html:__options.confirmText}).attr("data-type","confirm"); $__bottom.append($btnConfirm); $__bottom.on(ctrlType,"btn",function(){ if(__options.success || typeof __options.success == "function"){ __options.success.call(this,{ confirm:$(this).attr("data-type")=="confirm" ,cancel:$(this).attr("data-type")=="cancel" }) } hide(); }) show(); return self; } self.sticker=function(options){ __options.mode="sticker"; margeOptions(options); show(); return self; } self.toast=function(options){ __options.mode="toast"; margeOptions(options); show(); return self; } $__shadow=$("<message2-shadow>").attr("id",new Date().getTime()); $("body").append($__shadow); return self; } return new MESSAGER2(); };