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">
<input type="text" placeholder="添加标签">
</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="../../script/zepto.js"></script>
<script src="car-popup.js"></script>
<link href="car-popup.css" rel="stylesheet" /> <script>
$('#btn-aaa').click(function(){
$('body').popup({
title:'填写标签名称，最长10个汉字'
,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>
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;
}
js部分
/*
弹出层组件
@jslover 20140817
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);