基于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);
...