基于jQuery写的一个弹窗插件

JavaScript 2013-03-15 jQuery,弹窗,dialog

基于jQuery写的一个弹窗插件,功能简陋,效果单一,旨在给需要的童鞋参考。

效果我就不浪费时间打字了,自己访问demo

http://www.qttc.net/static/demo/dialog201303/

主要是是用jQuery的animate函数做同时滑动淡出淡入效果

函数用法介绍

$('弹层按钮').lee_dialog({dialog:'浮层对象',close:'关闭按钮'});

使用实例:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />	
	</head>
	<body>
		<button class="aa">haha</button>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<p>3234234</p>
		<div class="dialog" style="width:500px;height:200px;background:#ccc;display:none;">
			<a class="close" href="javascript:void(0);">关闭</a>	
		</div>
	</body>

	<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
	<script type="text/javascript" src="lee_plug/dialog.js"></script>
	<script type="text/javascript">	
		$('.aa').lee_dialog({dialog:'.dialog',close:'.close'});	
	</script>

</html>

代码:

(function($) {
    $.fn.lee_dialog = function(param){   
	if(typeof param.dialog=='undefined') return;
	var dialog = param.dialog;
	var close = param.close || '.close';
	var speed = 400;
	var margin_left = '-'+parseInt($(dialog).width()/2)+'px';
	var margin_top = '-'+parseInt($(dialog).height()/2)+'px';
    	var _this = null; 
	var bg = '<div class="lee_dialog_bg" style="width:100%;height:'+$(document).height()+'px;background:#000;opacity:0.7;filter:alpha(opacity=70);position:absolute;left:0;top:0;z-index:2147483600;display:none;"></div>';

	$(dialog).css({'position':'fixed','margin-left':margin_left,'margin-top':margin_top,'left':'50%','top':'50%','display':'none','z-index':2147483601});
	$('body').append(bg);

    	$(this).each(function(){

		_this = $(this);

		_this.click(function(){
			if(!$(dialog).is(':visible')){
				$('.lee_dialog_bg').fadeIn(parseInt(speed/2));
				$(dialog).css({'top':'35%','display':'block','opacity':0.0});
				$(dialog).animate({top:'50%',opacity:1},speed);
			}
		});

		$(dialog+' '+close).click(function(){
			$(dialog).animate({top:'65%',opacity:0},speed,false,function(){$(this).hide().css('top','50%');$('.lee_dialog_bg').fadeOut(parseInt(speed/2));});
		});




	});
    }
  
})(jQuery);

dmeo截图:

文字链接:《基于jQuery写的一个弹窗插件

文章地址:http://www.qttc.net/201303290.html

除非标注,琼台博客所有博文均为原创,转载请加文字链接注明来源

乳名?小名?昵称?网名?均可

email,放心,我不会给你乱投广告的

想获得回访就把你的站点URL写上(没有留空)

[NOTICE]木要投放广告
[NOTICE]木要骂人,说不该说的话
[NOTICE]自由言论,但要遵纪守法

Comments 5