在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 class="title"></div>'+ '<div class="content-wrap">'+ '</div>'+ '<div class="footer">'+ '<div class="btn-group">'+ '</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 class="button-block button">' + this.args.buttons[0]["name"] + '</div>'; } else if (this.args.buttons.length == 2) { group.innerHTML = '<div class="button-one button">' + this.args.buttons[0]["name"] + '</div><div class="button-two button">' + 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,各种问题,请谨慎使用。