函数用法介绍
$('弹层按钮').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>3234弹窗效果代码234</p> <p>3234234</p> <p>3234234</p> <p>3234234</p> <p>3234jquery弹窗效果代码234</p> <p>3234234</p> <p>323弹窗效果代码4234</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> |
|
jquery代码
| 代码如下 | 复制代码 |
|
(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); |
|
时间： 2024-11-16 09:14:03