基于jQuery写的一个弹窗插件，功能简陋，效果单一，主要是是用jQuery的animate函数做同时滑动淡出淡入效果
JavaScript Code
(function($) {
$.fn.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="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')) {
$('.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%');
$('.dialog_bg').fadeOut(parseInt(speed/2));
});
});
});
}
})(jQuery);
函数用法
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<button class="show-dialog-btn">Open the dialog</button>
<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="dialog.js"></script>
<script type="text/javascript">
$('.show-dialog-btn').dialog({dialog:'.dialog', close:'.close'});
</script>
</html>
