display modal box with loader

Default File

// plugin by hichem benchaabene  
// load an external file while hovering an element 
// load a specific div while hovering an element 
(function($) {
 $.fn.jsTip = function(options) {
	var defaults={
		boxName:'#box',
		loader:'#loader',
		boxContentName:'#boxContent',
		opacity:.2,
		height:'200px',
		backgroundColor:'#000',
		file:'load.php'||'',
		loaderParam:'',
		loadingMessage:'<p>Loading...</p>'
	};
	var object= $.extend(defaults,options);
	return  this.each(function(){
	var e=$(this); 
		e.hover(function(){
			console.log('you hovered the element successfully- the first code execution');
			showLoader();
			$(object.loader).ajaxStart(function(){ 
			$(object.loader)[0].innerHTML=$(object.loadingMessage); 
		});
	},function(){
		hideLoader();
		console.log('hiding the loaded div when the user-mouse leave the hover area '); 
});
	function hideLoader(){
		$(object.loader).hide();
	}
	function showLoader(){
		  console.log('THIS is the main function');
		console.log('this is the execution of the showloader function'); 
		$(object.loader).fadeIn(100,loadFrame());
		return false; 
	} 
	function loadFrame(){
		var filename= object.file||'load.php';// hardcoded to loader.php which is not always the case  
		$.ajax({
			type: "GET",
			url:filename,
			dataType: "text"
			}).success(function(data){
				$(object.loader)[0].innerHTML=data;
			});
	}
	function loading(){
	}// loading external file 
	function showBox(){
		$(object.modalName).css({
		'width':$(window).width(),
		'height':$(window).height(),
		'background-color':object.opacity,
		'z-index':99,
		position:'absolute'
		}).show();
		$(object.boxName).css({
			position:'absolute'
		}).show().animate({
		width: '+=200px',
		height:'+=200px',
		dir:"center"
		 }, {
		duration: 250,
		specialEasing: {
		 width: 'easeInOutExpo',
		 height: 'easeInOutExpo'
		  },
			complete: function() {    
		  }
		 }).css({ 
		top:($(window).height()/2 - $(object.boxName).height()),
		left:($(window).width()/2 - $(object.boxName).width())
		});
	}
function hideBox(){
		$(object.boxName).hide().css({width:'-=200px',height:'-=200px'});
		$(object.modalName).hide();
	}
		$(object.modalName).click(function(){ hideBox();});
		$("a.close").click(function(){ hideBox();});
	});
 }
})(jQuery);