<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection"content="telephone=no, email=no" />
<title>原创弹出层插件，支持各类型内容，支持回调函数</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
body{font-size:16px;color:#333;}
.ev{padding: 10px; background: #ddd; margin-bottom: 10px;}
.viewPager{min-width:320px; max-width:720px; margin:0 auto;}
.panelBox{position:fixed; top:45%;left:50%;width:90%;min-width:280px;max-width:720px;background:#fff; border:1px solid #eee; box-shadow:0 0 50px rgba(0,0,0,0.1);border-radius:5px;min-height:200px;}
.panelBox .hd{height:40px; border-bottom:1px solid #ddd; line-height:40px; padding:0 10px; background:#eee}
.panelBox .bd{padding:10px; min-height:100px;}
.panelBox .ft{height:30px; border-top:1px solid #ddd;padding:5px 10px; background:#eee;}
.panelBox .ft{text-align:right;}
.panelBox .ft span{display:inline-block; width:90px;height:30px; line-height:30px; text-align:center; margin-left:15px; border-radius:5px; color:#fff; cursor:pointer;}
.panelBox .ft .btnCallback{background:#f60;}
.panelBox .ft .btnCancel{background:#999;}
.bounceIn{-webkit-animation:bounceIn .2s .2s ease both;animation:bounceIn .2s .2s ease both;}
@-webkit-keyframes bounceIn{
0%{opacity:0;-webkit-transform:scale(.9)}
100%{opacity:1;-webkit-transform:scale(1)}
}
@keyframes bounceIn{
0%{opacity:0;transform:scale(.9)}
100%{opacity:1;transform:scale(1)}
}
.bounceOut{-webkit-animation:bounceOut .2s ease both;animation:bounceOut .2s ease both;}
@-webkit-keyframes bounceOut{
0%{-webkit-transform:scale(1)}
100%{opacity:0;-webkit-transform:scale(.9)}
}
@keyframes bounceOut{
0%{-webkit-transform:scale(1)}
100%{opacity:0;-webkit-transform:scale(.9)}
}
</style>
<script type="text/javascript">
;(function($) {
$.extend({
panel :{
defaults :{
'root' : 'body',
'title' : 'title',
'type' : 'txt',
'content' : '',
'hasHd' : true,
'opacity' : 0.3,
'maskBackground': '#000',
'callback' : function(){}
},
config :function(ops){
this.options = $.extend({},this.defaults, ops);
},
tmp :function(im){
return im.options.hasHd ?
'<div id="panelBox" class="panelBox">'
+ '<div class="hd">'+im.options.title+'</div>'
+ '<div class="bd">'+im.options.content+'</div>'
+ '<div class="ft"><span class="btnCallback">确定</span><span class="btnCancel">取消</span></div>'
+ '</div>' :
'<div id="panelBox" class="panelBox" style="width:'+im.options.width+'">'
+ '<div class="bd"></div>'
+ '<div class="ft"><span class="btnCallback">确定</span><span class="btnCancel">取消</span></div>'
+ '</div>'
},
mask :function(im){
return '<div id="panelMask" class="mask" style="width:100%;height:100%;position:fixed;top:0;left:0;opacity:0;-webkit-transition:all .2s ease-in;transition:all .2s ease-in;background:'+im.options.maskBackground+';"></div>'
},
creat :function(){
var _this = this;
$(this.options.root).append(this.mask(this));
$(this.options.root).append(this.tmp(this));
this.oDialog = $('#panelBox');
this.oMask = $('#panelMask');
this.oCon = $('.bd',this.oDialog);
this.okBtn = $('.btnCallback',this.oDialog);
this.cancelBtn = $('.btnCancel',this.oDialog);
this.setpos();
switch(this.options.type){
case 'txt':
this.oCon.html(this.options.content);
break;
case 'url':
this.oCon.html('Loading......');
$.get(this.options.content,function(html){
_this.oCon.html(html);
});
break;
case 'selecter':
this.oCon.html($(_this.options.content).html());
break;
case 'iframe':
this.oCon.html('<iframe width="100%" height="200" src="'+this.options.content+'" scrolling="auto" frameborder="0"><iframe>');
break;
default:
this.oCon.html(this.options.content);
break;
}
},
show :function(){
this.creat();
var _this = this;
setTimeout(function(){
_this.oMask.css('opacity',_this.options.opacity);
},10);
this.oDialog.addClass('bounceIn');
this.bindEve();
},
hide :function(){
var _this = this;
this.oMask.css('opacity',0);
this.oDialog.removeClass('bounceIn').addClass('bounceOut');
setTimeout(function(){
_this.oMask.remove();
_this.oDialog.remove();
},200);
},
bindEve :function(){
var _this = this;
this.oMask.bind('click',function(){
_this.hide();
});
this.okBtn.bind('click',function(){
_this.options.callback();
_this.hide();
});
this.cancelBtn.bind('click',function(){
_this.hide();
});
$(window).resize(function(){
_this.setpos();
})
},
setpos :function(){
var ml = parseInt(this.oDialog.width()/2),
mt = parseInt(this.oDialog.height()/2);
this.oDialog.css({'margin-left':-ml+'px','margin-top':-mt+'px'});
}
},
dialog:function(ops) {
$.panel.config(ops);
return $.panel.show(ops);
}
})
})(jQuery);
$(function(){
//调用
var html = '<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>';
$('#evtag1').bind('click',function(){
$.dialog({
'title' :'测试title',
'type' :'txt',
'content' :html,
'callback' :function(){
console.log('回调函数执行');
}
})
});
$('#evtag2').bind('click',function(){
$.dialog({
'title' :'测试title',
'type' :'selecter',
'content' :'#dialogContent',
'callback' :function(){
console.log('回调函数执行');
}
})
});
$('#evtag3').bind('click',function(){
$.dialog({
'title' :'测试title',
'type' :'iframe',
'content' :'http://www.baidu.com/',
'callback' :function(){
console.log('回调函数执行');
}
})
})
$('#evtag4').bind('click',function(){
$.dialog({
'title' :'测试title',
'type' :'url',
'content' :'http://www.baidu.com/',
'callback' :function(){
console.log('回调函数执行');
}
})
});
})
</script>
</head>
<body>
<div class="viewPager">
<p class="ev" id="evtag1">弹出-文本</p>
<p class="ev" id="evtag2">弹出-选择器</p>
<p class="ev" id="evtag3">弹出-iframe</p>
<p class="ev" id="evtag4">弹出-url</p>
<div id="dialogContent">选择器内容</div>
</div>
</body>
</html>
