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:; position: absolute; position: fixed; top:; left:; }
.car-popup { display: block; width: 300px; padding:; opacity:; -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:; 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:; -webkit-transform: scale(0); top: 50%; left: 50%; margin: 0px auto; }
.car-popup>header { font-size: 16px; margin:; padding:; 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; }