你的位置:首页 > Java教程

[Java教程]移动端弹出框插件


在H5移动端项目开发过程,肯定会遇到不少与客户打交道的弹出框。

当然基于H5+ API中有提供系统的弹出对话框,虽然能够达到效果,但是实际的美观是几乎不存在的。

应项目需要,草草的写了一个弹出框的效果。

作为程序猿代码是最敏感的,废话也少说了,直接看下面的代码:

css代码部分:

#lee-mask {  background: #000;  opacity: 0.7;  position: absolute;  z-index: 1000;  top: 0;  left: 0;  right: 0;  bottom: 0;  display: none;}#lee-content-wrap {  position: absolute;  z-index: 1001;  left: 50%;  top: 50%;  margin-left: -150px;  margin-top: -100px;  background: #fff;  box-shadow: 0 0 15px rgba(0, 0, 0, .5);  display: none;}#lee-content {  position: relative;  width: 300px;  height: auto;}/* title */#lee-content .title {  position: absolute;  top: 0;  left: 0;  padding: 0 30px;  box-sizing: border-box;  width: 100%;  height: 50px;  line-height: 50px;  background: #0B1F35;  color: #fff;}/* content */#lee-content .content-wrap {  position: absolute;  top: 50px;  left: 0;  width: 100%;  bottom: 40px;  padding: 10px;  box-sizing: border-box;}/* footer */#lee-content .footer {  position: absolute;  bottom: 0;  left: 0;  width: 100%;  height: 40px;  line-height: 40px;}#lee-content .footer .btn-group {  position: relative;  width: 100%;  height: 100%;}#lee-content .footer .btn-group .button-one,#lee-content .footer .btn-group .button-two,#lee-content .footer .btn-group .button-block {  position: absolute;  height: 100%;  text-align: center;  color: #fff;  cursor: pointer;}#lee-content .footer .btn-group .button-one {  background: #3F474F;  left: 0;  right: 50%;}#lee-content .footer .btn-group .button-two {  background: #596396;  left: 50%;  right: 0;}#lee-content .footer .btn-group .button-block {  background: #596396;  left: 0;  right: 0;}/* input样式框 */#lee-content .popup-input-wrap {  margin-top: 15px;}#lee-content .popup-input-wrap .input-withdraw {  margin: 0;  padding: 0 10px;  height: 30px;  border: none;  border-bottom: 1px solid #ccc;  line-height: 30px;  font-size: 16px;}#lee-content .input-extras {  margin: 10px;  text-align: right;  font-size: 14px;  color: #CDA;}.fadein {  -webkit-animation: fadein 0.2s ease-in-out;  animation: fadein 0.2s ease-in-out;}@keyframes fadein {  0% {    opacity: 0;  }  100% {    opacity: 1;  }}@-webkit-keyframes fadein {  0% {    opacity: 0;  }  100% {    opacity: 1;  }}.mask-fadein {  -webkit-animation: mask-fadein 0.2s ease-in-out;  animation: mask-fadein 0.2s ease-in-out;}@keyframes mask-fadein {  0% {    opacity: 0;  }  100% {    opacity: 0.7;  }}@-webkit-keyframes mask-fadein {  0% {    opacity: 0;  }  100% {    opacity: 0.7;  }}.fadeout {  -webkit-animation: fadeout 0.2s ease-in-out;  animation: fadeout 0.2s ease-in-out;}@keyframes fadeout {  0% {    opacity: 1;  }  100% {    opacity: 0;  }}@-webkit-keyframes fadeout {  0% {    opacity: 1;  }  100% {    opacity: 0;  }}.mask-fadeout {  -webkit-animation: mask-fadeout 0.2s ease-in-out;  animation: mask-fadeout 0.2s ease-in-out;}@keyframes mask-fadeout {  0% {    opacity: 0.7;  }  100% {    opacity: 0;  }}@-webkit-keyframes mask-fadeout {  0% {    opacity: 0.7;  }  100% {    opacity: 0;  }}

js代码部分:

(function(global, factory) {  factory(global);})(window, function(global) {  var defaults = {    width: 300,    height: 200,    addmaskevent : false,    title: {      height: 40,      content: "提示",      color: "#5f5d5d",      background: "#06495a"    },    main: {      content: "内容项填写",      align: "left",      background: "#ff979696",      font: "1em",      color: "#000"    },    buttons: [{      name: "确定",      background: "#c4e8da",      color: "#26a65b",      click: function() {        return true;      },      touchstart: function() {        return true;      },      touchend: function() {        return true;      }    }, {      name: "取消",      background: "#f6ccc2",      color: "#d64541",      click: function() {        return true;      },      touchstart: function() {        return true;      },      touchend: function() {        return true;      }    }]  };      function Popup(options) {    if (this instanceof Popup) {      this.args = util.extend(defaults, options);      this.renderNode() // 渲染节点      this.renderAttr() // 渲染属性值      this.maskevent();  // 给mask添加时间蒙层    } else {      new Popup(options);    }  }  Popup.prototype = {    // render model    renderNode: function() {      this.mask = document.createElement("div");      this.mask.id = "lee-mask";      this.content = document.createElement("div");      this.content.id = "lee-content-wrap";      this.content.innerHTML = '<div id="lee-content">'+                    '<div ></div>'+                    '<div >'+                    '</div>'+                    '<div >'+                      '<div >'+                      '</div>'+                    '</div>'+                  '</div>';      document.body.appendChild(this.mask);      document.body.appendChild(this.content);    },    // 给mask添加点击隐藏事件函数    maskevent : function(){      var _this = this;      if(_this.args["addmaskevent"]){        _this.mask.addEventListener("tap", function(){          _this.hide(_this.mask, _this.content)        })      } else {        return;      }    },    // 渲染属性值    renderAttr: function() {      var inner = this.innerContent = document.getElementById("lee-content"); // 内容      var title = this.title = inner.querySelector(".title"); // 头部信息显示      var group = this.group = inner.querySelector(".btn-group"); // 按钮组件      var wrap = this.wrap = inner.querySelector(".content-wrap"); // 内容环绕部分      var _this = this;      // 整体框架大小设置      util.renderCss(inner, {        "width": this.args["width"] + "px",        "height": this.args["height"] + "px"      });      util.renderCss(this.content, { // 渲染整体大小的同时需要渲染框体位置的改变        "margin-top": -this.args["height"] / 2 + "px",        "margin-left": -this.args["width"] / 2 + "px"      });      // title内容显示      if (this.args["title"]["height"] == 0) {        inner.removeChild(title);      } else {        title.innerHTML = this.args["title"]["content"];        util.renderCss(title, {          "color": this.args["title"]["color"],          "background": this.args["title"]["background"],          "height": this.args["title"]["height"] + "px",          "line-height": this.args["title"]["height"] + "px"        });      }      // 内容区显示部分      wrap.innerHTML = this.args["main"]["content"]; // 可以是html代码嵌入      util.renderCss(wrap, {        "top": this.args["title"]["height"] + "px",        "text-align": this.args["main"]["align"],        "font-size": this.args["main"]["font"],        "background": this.args["main"]["background"],        "color": this.args["main"]["color"]      })      // buttons      if (this.args.buttons.length == 1) {        group.innerHTML = '<div >' + this.args.buttons[0]["name"] + '</div>';      } else if (this.args.buttons.length == 2) {        group.innerHTML = '<div >' + this.args.buttons[0]["name"] +          '</div><div >' + this.args.buttons[1]["name"] + '</div>';      }      var button = this.buttons = group.querySelectorAll(".button");      for (var i = 0; i < button.length; i++) {        (function(i) {          util.renderCss(button[i], {            "color": _this.args.buttons[i]["color"],            "background": _this.args.buttons[i]["background"]          });          var obj = _this.args.buttons[i];          if (_this.args.buttons[i]["click"]) {            button[i].addEventListener("tap", function() {              obj["click"]();              _this.hide(_this.mask, _this.content)            }, false);          } else if (_this.args.buttons[i]["touchstart"]) {            button[i].addEventListener("touchstart", function() {              obj["touchstart"]();              _this.hide(_this.mask, _this.content)            }, false);          } else if (_this.args.buttons[i]["touchend"]) {            button[i].addEventListener("touchend", function() {              obj["touchend"]();              _this.hide(_this.mask, _this.content)            }, false);          }        })(i)      }    },    show: function() {      var _this = this;      _this.mask.style.display = "block";      _this.content.style.display = "block";      _this.mask.classList.add("mask-fadein");      _this.content.classList.add("fadein");      _this.mask.addEventListener("webkitAnimationEnd", function() {        _this.mask.style.opacity = "0.7";        _this.content.style.opacity = "1";      })    },    hide: function(mask, content) {      var that = this;      mask.classList.add("mask-fadeout");      content.classList.add("fadeout");      mask.addEventListener("webkitAnimationEnd", function() {        mask.style.display = "none";        content.style.display = "none";        mask.classList.remove("mask-fadeout");        content.classList.remove("fadeout");        mask.style.opacity = "0";        content.style.opacity = "0";        mask.removeEventListener("webkitAnimationEnd", arguments.callee)        that.deleteNode();      })    },    active: function(node) {      node.classList.add("tap-active")    },    // 处理节点    deleteNode : function(){      this.mask.parentNode.removeChild(this.mask);      this.content.parentNode.removeChild(this.content);    }  };  var util = {    // 合并参数    extend: function(old, opt) {      var newopt = opt;      var oldopt = old;      for (var name in newopt) {        if (typeof oldopt[name] != "boolean" && oldopt[name]) {          if (typeof newopt[name] === "object" && !Array.isArray(newopt[name])) {            arguments.callee(oldopt[name], newopt[name])          } else if (Array.isArray(newopt[name])) {            for (var i = 0; i < newopt[name].length; i++) {              if (typeof newopt[name][i] === "object" && !Array.isArray(newopt[name][i])) {                if (oldopt[name].length == newopt[name].length) {                  arguments.callee(oldopt[name][i], newopt[name][i])                } else if(newopt[name].length == 1) {                  oldopt[name].splice(1, 1) // 删除当前默认节点对象                  arguments.callee(oldopt[name][0], newopt[name][0])                } else if (oldopt[name].length == 1 && newopt[name].length == 2) {                  var temp = newopt[name][1];                  var demo = {                    name: "取消",                    background: "#f6ccc2",                    color: "#d64541",                    click: function() {                      return true;                    },                    touchstart: function() {                      return true;                    },                    touchend: function() {                      return true;                    }                  }                  var tempobj = arguments.callee(demo, temp)                  oldopt[name].push(tempobj)                }              }            }          } else {            oldopt[name] = newopt[name]          }        } else if(typeof oldopt[name] == "boolean"){          oldopt[name] = newopt[name]        }      }      return oldopt;    },    // 渲染css工具函数    renderCss: function(obj, options) {      for (var name in options) {        obj.style[name] = options[name];      }    },    // 深拷贝复制    simplyDeepCopy : function(obj){      var objstr = JSON.stringify(obj);      var temp = JSON.parse(objstr);      return temp;    }  };  // 闭包中暴露出该函数  global.Popup = Popup;});

使用的方法:

      var options = {        width : 300,        height : 170,        title : {          height : 40,          content : "提示",          color : "#5f5d5d",          background : "#d1d1d1"        },        main : {          content : "",          align : "left",          background : "#ff979696",          font : "1em",          color : "#555"        },        buttons : [{          name : "确定",          background : "#c4e8da",          color : "#26a65b",          click : function(){ console.log("click")},          tap : function(){ console.log("tap") },          touchstart : function(){ return true},          touchend : function(){ return true;}        },{          name : "取消",          background : "#f6ccc2",          color : "#d64541",          click : function(){ return true; },          touchstart : function(){ return true;},          touchend : function(){ return true;}        }]      }            document.getElementById("id1").addEventListener("tap", function(){        options.main.content = "<div class='popup-input-wrap'>\                      <input type='number' maxlength='20' placeholder='please enter your password' class='input-withdraw'/>\                    </div>";
         options.buttons[0]["name"] = "按钮1";
         options.buttons[0].click = function(){
           // 此处写第一按钮需要处理的逻辑代码
         }
         options.buttons[1]["name"] = "按钮2";
         options.buttons[1].click = function(){
           // 此处写第二按钮需要处理的逻辑代码
         } var pop = new Popup(options) pop.show();    // 弹出框按照需要手动设置显示 }) document.getElementById("id2").addEventListener("tap", function(){ options.main.content = "chasldkfjalskjdflk"
         options.buttons[0]["name"] = "按钮1";
         options.buttons[0].click = function(){
           // 此处写第一按钮需要处理的逻辑代码
         }
         options.buttons[1]["name"] = "按钮2";
         options.buttons[1].click = function(){
           // 此处写第二按钮需要处理的逻辑代码
         } var pop1 = new Popup(options) pop1.show(); })

内容区可以自定义一些html代码加上相关的css样式即可,菜鸟初次写插件,望大神指点。

PS: 此插件存在各种BUG,各种问题,请谨慎使用。