纯js h5 弹出框

</pre><p><pre name="code" class="javascript">////对象模式，不销毁//var message = new MESSAGER(//  {//      "ok":{//          "name":"OK"//          ,"callback":null//          ,"disable":true//      }//      ,"cancel":{//          "name":"取消"//          ,"callback":null//          ,"disable":true//      }//  }//  ,{//      "disable" :true//      ,"class" : ""//      ,"message" : "确认"//  }//);  //message.show('消息');////单例销毁模式，使用完就销毁//MESSAGER(//  {//      "ok":{//          "name":"OK"//          ,"callback":function(){//              var postId = $(this).parents("footer").attr("postId");//              DATAHELPER(//                  dataSite//                  ,"XXX_XXX_XX_XX_XX" //TODO 无接口//                  ,{postId: postId}//                  ,""//              );//          }//          ,"disable":true//      }//      ,"cancel":{//          "name":"取消"//          ,"callback":null//          ,"disable":true//      }//  }//  ,{//      "disable" :true//      ,"class" : ""//      ,"message" : "确认"//  }//  ,""//      ,true//).show("确认删除么？");  //////提示贴模式//MESSAGER(//  {}//  ,{"disable" :true}//  ,{mode:"sticker"，borderRadius：false}//  ,true//).show("sticker提示贴");  ////提示框，自动销毁//MESSAGER(//  {}//  ,{"disable" :true}//  ,{mode:"toast",borderRadius:false}//  ,true//).show("toast提示框");  //==========================================================================//弹出框var MESSAGER = function(buttons, head, options, singleMode){var bg, box, messager, lockScroll = false;var mWidth = Math.min((window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth),414) * 0.7;var mHeight = Math.min(window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight);this.buttons = {"ok":{"name":"OK","callback":null,"disable":false},"cancel":{"name":"CANCEL","callback":null,"disable":true},"skip":{"name":"SKIP","callback":null,"disable":true}}this.head = {"disable" :true,"message" : ""}this.options = {scrolled : false,mode : 'alert' //toast||sticker,borderRadius : true,headClass : "",footClass : "",boxClass : ""};JSONIntersection(this.options, options);JSONIntersection(this.buttons, buttons);JSONIntersection(this.head, head);if(this.options.mode == 'toast') {singleMode = true;} else if (this.options.mode == 'sticker') {this.head.disable = true;}var self  = this;this.show = function(msg){if(typeof msg == "object") {box.appendChild(msg);} else {box.innerHTML = msg;box.textContent = msg;}bg.style.display = "block";messager.style.display = "block";if(messager.offsetHeight >= mHeight) {messager.style.top = "0px";} else {messager.style.marginTop = '-'+(messager.offsetHeight/2 +20)+'px';}};this.hide = function(){if(singleMode){document.body.removeChild(bg);} else {bg.style.display = "none";messager.style.display = "none";}};//this.reset = function() {}var createHeader = function(){var header = document.createElement("div");header.style.display = "block";header.style.width = "100%";header.style.height = "30px";header.style.lineHeight = "30px";if(!self.head.disable) {header.innerText = self.head.message;header.textContent = self.head.message;header.style.color = "#0070fe";header.style.borderBottom = "1px solid #cbcbcb";} else {header.style.height = "10px";header.style.borderBottom = "";}if(self.options.headClass) {header.className = self.options.headClass;}return header;};var createBox = function () {box = document.createElement("div");box.style.display = "table-cell";box.style.verticalAlign = "middle";box.style.padding = "15px 10px";box.style.wordBreak ="normal";box.style.wordWrap = "break-word";box.style.maxHeight = "355px";box.style.width = (mWidth - 20) + 'px';if(self.options.mode =='toast') {if(self.options.borderRadius) {box.style.borderRadius = '15px';}box.style.height = "15px";box.style.minHeight = "15px";} else {box.style.minHeight = "50px";}if(!self.options.boxClass) {box.style.color = "#000";if(self.options.mode == 'toast') {box.style.opacity='0.5';} else {box.style.backgroundColor = "#F3F3F3";}} else {box.className = self.options.boxClass;}return box;};var createFooter = function(){var footer = document.createElement("div");footer.style.display = "block";footer.style.width = "100%";footer.style.height = "35px";footer.style.borderTop = "1px solid #cbcbcb";footer.style.color = "#0070fe";if(self.options.footClass) {footer.className = self.options.footClass;}var btnArr = [];for(var key in self.buttons){if(!self.buttons[key].disable) {var btn = document.createElement("div");btn.style.display = "inline-block";btn.style.height = "35px";btn.style.lineHeight = "35px";btn.className = key;btn.innerHTML = self.buttons[key].name;btn.addEventListener(ctrlType, self.buttons[key].callback, false);btn.addEventListener(ctrlType, self.hide, false);btnArr.push(btn);}}for(var i=0; i<btnArr.length; i++) {var btn = btnArr[i];if(i > 0) {btn.style.borderLeft = "1px solid #cbcbcb";}btn.style.width = (mWidth - (btnArr.length-1))/btnArr.length + 'px';footer.appendChild(btn);}return footer;};var createMessager = function(){messager = document.createElement("div");messager.style.display = "block";messager.style.width = mWidth+'px';messager.style.position = "absolute";messager.style.top = "50%";messager.style.left = "0px"messager.style.right = "0px"messager.style.margin = "0px auto";messager.style.textAlign = "center";messager.style.backgroundColor="#F3F3F3";messager.style.maxHeight = "70%";messager.style.overflowY = "auto";messager.style.minHeight = "50px";if(self.options.borderRadius) {messager.style.borderRadius = "10px";}var header,footer, box = createBox();if(self.options.mode == 'toast') {messager.style.maxHeight = "none";header = document.createElement("div");footer = document.createElement("div");} else if (self.options.mode =='sticker'){header = document.createElement("div");footer = document.createElement("div");messager.style.paddingTop="6px"var btnClose = document.createElement("span");messager.appendChild(btnClose);btnClose.style.display = "block"btnClose.style.position = "absolute";btnClose.style.right = "9px";btnClose.style.top = "7px";btnClose.style.height = "10px";btnClose.style.width = "10px";btnClose.style.background = "url(img/close.png) no-repeat center";btnClose.style.backgroundSize = "10px 10px";btnClose.addEventListener(ctrlType, self.hide, false);} else {header = createHeader();footer = createFooter();}messager.appendChild(header);messager.appendChild(box);messager.appendChild(footer);};var init = function() {if(!bg) {bg = document.createElement("div");if(self.options.mode =='toast') {bg.style.bottom = "10%";bg.classList.add('toast-fadeOut');bg.addEventListener("webkitAnimationEnd",function(){console.log('end')self.hide();})} else {bg.style.height = "100%";bg.style.textAlign = "center";bg.style.zIndex = "99999";bg.style.top = "0";bg.style.backgroundColor = "rgba(0,0,0,0.3)";bg.style.display = "none";}bg.style.position = "fixed";bg.style.width = "100%";document.body.appendChild(bg);}if(!messager){createMessager();}bg.appendChild(messager);};var scrollListener = function(e) {if(lockScroll){e.preventDefault();e.stopPropagation();}};init();if(singleMode){return self;}};