html:
<!DOCTYPE html> <html> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <body> <h1>弹出层DEMO</h1> <a href="#" id="btn-aaa">打开一个表单</a> <a href="#" id="btn-bbb">普通提示</a> <a href="#" id="btn-ccc">选择确认框</a> <br><br> <div> 用于演示用的表单，实际中会将容器隐藏 <form id="form-1"> a:<input type="text"> <br> b:<input type="text"> <br> b:<input type="text"> <br> b:<input type="text"> <br> b:<input type="text"> <br> <input type="submit"> </form> </div> <!--调用说明--> <pre> //依赖文件 zepto.js //默认值配置 var defaults = { id:'', formId:null, title:"提示", message:"", cnacel:"取消", onCancel: function(){}, ok:"确认", onOk: function(){}, cancelOnly:false, okClass:'button', cancelClass:'button', onShow:function(){}, onHide:function(){}, closeOnOk:true, hideTitle:false, //重写样式 popClass:'' }; //调用示例： //默认容器都是body $('body').popup({ title:'表单提交' ,id:'pop-1' ,formId:'form-1' ,closeOnOk:false ,ok:'提交' ,onOk:function(){ $('#form-1').submit(); } }); </pre> <script src="zepto.min.js"></script> <script src="popup.js"></script> <link href="popup.css" rel="stylesheet" /> <script> $('#btn-aaa').click(function(){ $('body').popup({ title:'表单提交' ,id:'pop-1' ,formId:'form-1' ,closeOnOk:false ,ok:'提交' ,onOk:function(){ $('#form-1').submit(); } }); return false; }); $('#btn-bbb').click(function(){ $('body').popup('这是普通提示'); return false; }); $('#btn-ccc').click(function(){ $('body').popup({ title:'提示' ,message:'您是否要退出' ,id:'pop-2' ,onOk:function(){ alert('OK'); } }); return false; }); $('#form-1').bind('submit',function(){ alert('表单form-1提交'); return false; }); </script> </body> </html>
popup.js:
/* 弹出层组件 DEMO $('body').popup({ title:'提示', formId:'form1', id:'pop-1' }); 手动关闭 $("#pop-1").trigger("close"); */ (function ($) { //队列 var queue = []; //默认值配置 var defaults = { id:'', formId:null, title:"提示", message:"", cnacel:"取消", onCancel: function(){}, ok:"确认", onOk: function(){}, cancelOnly:false, okClass:'button', cancelClass:'button', onShow:function(){}, onHide:function(){}, closeOnOk:true, hideTitle:false, //重写样式 popClass:'' }; //弹出层类 var Popup = (function () { var Popup = function (containerEl, opts) { this.container = containerEl; if (!this.container) { this.container = document.body; } try { if (typeof (opts) === "string" || typeof (opts) === "number"){ opts = { message: opts, cancelOnly: "true", cnacel: "关闭", hideTitle:true }; } var _this = this; var opts = $.extend({},defaults,opts); if(!opts.title){ opts.hideTitle = true; } if(!opts.id){ opts.id='popup-' + Math.floor(Math.random()*1000); } for(var k in opts){ _this[k] = opts[k]; } queue.push(this); if (queue.length == 1){ this.show(); } } catch (e) { console.log("配置错误：" + e); } }; Popup.prototype = { show: function () { var _this = this; var markup = '<div id="' + this.id + '" class="car-popup hidden '+ this.popClass + '">'; if(!_this.hideTitle){ markup += '<header>' + this.title + '</header>'; } markup +='<div class="content-body">' + this.message + '</div>'+ '<footer style="clear:both;">'+ '<a href="javascript:;" class="car-popup-cancel ' + this.cancelClass + '">' + this.cnacel + '</a>'+ '<a href="javascript:;" class="car-popup-ok ' + this.okClass + '" >' + this.ok + '</a>'+ ' </footer>'+ '</div></div>'; $(this.container).append($(markup)); //添加外部表单 if(this.formId){ var $content = $(this.container).find('.content-body'); var $form = $('#'+this.formId); this.$formParent = $form.parent(); $form.appendTo($content); } var $wrap = $("#" + this.id); $wrap.bind("close", function () { _this.hide(); }); if (this.cancelOnly) { $wrap.find('.car-popup-ok').hide(); $wrap.find('.car-popup-cancel').addClass('center'); } $wrap.find('A').each(function () { var button = $(this); button.bind('click', function (e) { if (button.hasClass('car-popup-cancel')) { _this.onCancel.call(_this.onCancel, _this); _this.hide(); } else if(button.hasClass('car-popup-ok')){ _this.onOk.call(_this.onOk, _this); if (_this.closeOnOk) _this.hide(); } e.preventDefault(); }); }); _this.positionPopup(); Mask.show(0.3); $wrap.bind("orientationchange", function () { _this.positionPopup(); }); //force header/footer showing to fix CSS style bugs $wrap.find("header").show(); $wrap.find("footer").show(); setTimeout(function(){ $wrap.removeClass('hidden'); _this.onShow(_this); },50); }, hide: function () { var _this = this; $('#' + _this.id).addClass('hidden'); Mask.hide(); if(!$.os.ie&&!$.os.android){ setTimeout(function () { _this.remove(); }, 250); } else{ _this.remove(); } }, remove: function () { var _this = this; if(_this.onHide){ _this.onHide.call(); } var $wrap = $("#" + _this.id); if(_this.formId){ var $form = $('#'+_this.formId); $form.appendTo(_this.$formParent); } $wrap.unbind("close"); $wrap.find('.car-popup-ok').unbind('click'); $wrap.find('.car-popup-cancel').unbind('click'); $wrap.unbind("orientationchange").remove(); queue.splice(0, 1); if (queue.length > 0) queue[0].show(); }, positionPopup: function () { var $wrap = $('#' + this.id); var w0 = $(window).width()||360 ,h0 = $(window).height()||500 ,w1 = $wrap[0].clientWidth||300 ,h1 = $wrap[0].clientHeight||100; $wrap.css("top", ((h0 / 2.5) + window.pageYOffset) - (h1 / 2) + "px") .css("left", (w0 / 2) - (w1 / 2) + "px"); } }; return Popup; })(); //遮罩类-单例 var Mask = { isShow : false ,show:function(opacity){ if (this.isShow){ return; } opacity = opacity ? " style='opacity:" + opacity + ";'" : ""; $('body').prepend($("<div id='car-pop-mask'" + opacity + "></div>")); $('#car-pop-mask').bind("touchstart", function (e) { e.preventDefault(); }).bind("touchmove", function (e) { e.preventDefault(); }); this.isShow = true; } ,hide:function(){ this.isShow = false; $('#car-pop-mask').unbind("touchstart") .unbind("touchmove") .remove(); } }; //注册到对象 $.fn.popup = function (opts) { return new Popup(this[0], opts); }; })(Zepto);
popup.css
#car-pop-mask { display: block; width: 100%; height: 100%; background: #000; z-index: 999999; position: absolute; position: fixed; top: 0; left: 0; } .car-popup { display: block; width: 300px; padding: 0; opacity: 1; -webkit-transform: scale(1); -webkit-transition: all 0.20s ease-in-out; transform: scale(1); transition: all 0.20s ease-in-out; position: absolute; z-index: 1000000; top: 50%; left: 50%; margin: 0px auto; background: #fff; color: #555; box-shadow: 1px 1px 1px #777; -webkit-box-shadow: 1px 1px 1px #777; } .car-popup >* { color: inherit; } .car-popup a { text-decoration: none; } .car-popup.hidden { opacity: 0; -webkit-transform: scale(0); top: 50%; left: 50%; margin: 0px auto; } .car-popup>header { font-size: 16px; margin: 0; padding: 0; background: #eee; color: #888; height: 30px; line-height: 30px; text-indent: 10px; } .car-popup>div { font-size: 14px; margin: 15px 10px; line-height: 1.8; } .car-popup>footer { width: 100%; text-align: center; display: block !important; } .car-popup .car-popup-cancel, .car-popup .car-popup-ok { float: left; width: 50%; background: #EAEAEA; color: #555; height: 30px; line-height: 30px; } .car-popup .car-popup-ok { float: right; background: #41B1B2; color: #fff; } .car-popup a.center { float: none !important; width: 100%; margin: auto; display: block; }