自定义插件实现弹出层
编写过程中的问题:
因为jquery在1.10之后的版本不支持.live()绑定方法,所以此文以.on()方法绑定
【jqueryPopIndex.html】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="jqueryPop.css">
<title>jquery 实现弹出层</title>
<script type="text/javascript" src="jquery-2.1.3.js"></script>
<script type="text/javascript" src="jquery.pop.js"></script>
</head>
<body>
<a href="#" class="bigLink" data-revealId="myPop">单击从上面弹出</a>
<a href="#" class="bigLink" data-revealId="myPop" data-animation="fade">单击直接弹出有动画</a> <!--选择动画种类-->
<a href="#" class="bigLink" data-revealId="myPop" data-animation="none">单击直接弹出无动画</a>
<!---弹出的显示层的div-->
<div id="myPop" class="revealPop">
<h1>jQuery弹出层</h1>
<p>在这里可以设置可以填写的内容的哦~ 可拓展 </p>
<a class="closeRevealPop">×</a><!---关闭弹出层的叉号,在css中定义样式-->
</div>
</body>
</html>
【jquery.pop.js】
(function($){
$(document).ready(function(){
$('a[data-revealId]').on('click',function(){//页面加载时绑定click事件 var popLocation = $(this).attr('data-revealId'); $('#'+popLocation).reveal($(this).data()); });
});
$.fn.reveal = function(options){
var defaults = {
animation:'fadeAndPop', //从头部渐渐弹入
animationSpeed:300,
closeOnBackgroundClick:true, //可以选择单击背景能否关闭弹出层
closeRevealPopClass:'closeRevealPop'
};
var options = $.extend({},defaults,options);
return this.each(function(){ var popText = $(this), topOffset = parseInt(popText.css('top')), topOffsetAndHeight = popText.height() +topOffset, locked = false, //显示与否的锁,false不显示 popBG=$('revealPopBg'); if(popBG.length == 0) popBG = $('<div class="revealPopBg"/>').insertAfter(popText); popText.bind('reveal:open',function(){ popBG.unbind('click'); $('.'+options.closeRevealPopClass).unbind('click'); if(!locked){ lockPop(); //三种不同的弹入效果 if(options.animation == 'fadeAndPop'){ popText.css({'top':$(document).scrollTop()-topOffsetAndHeight,'opacity':0,'visibility':'visible'}); popBG.fadeIn(options.animationSpeed/2); popText.delay(options.animationSpeed/2).animate({ 'top':$(document).scrollTop()+topOffset+'px', 'opacity':1 },options.animationSpeed,unlockPop()); } if(options.animation == 'fade'){ popText.css({'opacity':0,'visibility':'visible','top':$(document).scrollTop()+topOffset}); popBG.fadeIn(options.animationSpeed/2); popText.delay(options.animationSpeed/2).animate({ 'opacity':1 },options.animationSpeed,unlockPop()); } if(options.animation == 'none'){ popText.css({'visibility':'visible','top':$(document).scrollTop()+topOffset}); popBG.css({'display':'block'}); unlockPop(); } } popText.unbind('reveal:open'); }); popText.bind('reveal:close',function(){ if(!locked){ lockPop(); if(options.animation == 'fadeAndPop'){//三种不同的弹出效果 popBG.delay(options.animationSpeed).fadeOut(options.animationSpeed); popText.animate({ 'top':$(document).scrollTop()-topOffsetAndHeight+'px', 'opacity':0 },options.animationSpeed/2,function(){ popText.css({'top':topOffset,'opacity':1,'visibility':'hidden'}); unlockPop(); }); } if(options.animation == 'fade'){ popBG.delay(options.animationSpeed).fadeOut(options.animationSpeed); popText.animate({ 'opacity':0 },options.animationSpeed,function(){ popText.css({'opacity':1,'visibility':'hidden','top':topOffset}); unlockPop(); }); } if(options.animation == 'none'){ popText.css({'visibility':'hidden','top':topOffset}); popBG.css({'display':'none'}); } } popText.unbind('reveal:close'); }); popText.trigger('reveal:open'); var closeButton = $('.' + options.closeRevealPopClass).bind('click',function(){ popText.trigger('reveal:close') }); if(options.closeOnBackgroundClick){ //单击背景将不显示弹出层 popBG.css({'cursor':'pointer'}); popBG.bind('click',function(){ popText.trigger('reveal:close') }); } $('body').keyup(function(e){ if(e.which == 27){ //判断是否按下ESC键 popText.trigger('reveal:close'); } }); function unlockPop(){ locked = false; } function lockPop(){ locked = true; } });
}
}(jQuery));
【jqueryPop.css】
body{
font-family:font-family: "HelveticaNeue","Helvetica-Neue", "Helvetica", "Arial", sans-serif;
}
.bigLink{
display:block;
margin-top:100px;
text-align:center;
font-size:70px;
color:#06f;
}
.revealPopBg{ /*显示弹出层时, 背景的样式设置*/
position:fixed;
height:100%;
width:100%;
background:#000;
background:rgba(0,0,0,.4);
z-index:100; /*为了设置层次*/
display:none;
top:0;
left:0;
}
.revealPop{ /*弹出层样式*/
visibility:hidden;
top:100px;
left:50%;
margin-left:-300px;
width:520px;
background:#eee url(shadow.png) no-repeat -200px -80px;
position:absolute;
z-index:101; /*显示在背景层之上*/
padding:30px 40px 34px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
-moz-box-shadow:0 0 10px rgba(0,0,0,.4);
-webkit-box-shadow:0 0 10px rgba(0,0,0,.4);
box-shadow:0 0 10px rgba(0,0,0,.4);
}
.revealPop .closeRevealPop{ /*关闭显示层的按钮的样式*/
font-size:22px;
line-height:.5;
position:absolute;
top:8px;
right:11px;
color:#aaa;
text-shadow:0 -1px 1px rgba(0,0,0,.6);
font-weight:bold;
cursor:pointer
}