jquery.custom.modal.js 4.65 KB
/* 
 * Simple modal plugin based on http://leanmodal.finelysliced.com.au/ 
 * Customized to allow slightly different functionality and use of our own overlay plug-in
 */
(function($){
 
    $.fn.extend({
         
        sbcModal: function(options) {
 
            var defaults = {};
                 
            options = $.extend(defaults, options);
            var closeHandler = null;
 
            return this.each(function() {
                var o = options;
                
                /* Open modal */
                $(this).click(function(e) {
                	var modal_id = $(this).attr("href");

                	/* Define a close handler for closing of the modal */
                	closeHandler = function(event,data) {
                		if( !$(event.target).parents(modal_id).size() == 1
                			|| $(event.target).hasClass('close')
                			) {
                			close_modal(modal_id,data);
                		}
                		return false;
                	};
                    
                	/* Show overlay */
                	$.sbcOverlay.show(5001);

                	/* Bind it to click and custom event to allow external control */
                  $("a.close").click(closeHandler);
                  $("#sbc_overlay").click(closeHandler);
                	$("#sbc_overlay").bind('closemodal',closeHandler);

                	/* Position and display */
                	var modal_height = $(modal_id).outerHeight();
                	var modal_width = $(modal_id).outerWidth();

                	$(modal_id).css({
                		'display' : 'block',
                		'position' : 'absolute',
//                		'opacity' : 0,
                		'z-index': 50002,
                		'left' : 50 + '%',
                		'margin-left' : -(modal_width/2) + "px",
                		'top': 10 + '%',
                		//'margin-top' : -(modal_height/2) + "px"
                	});
 //               	$("#".modal_id).fadeTo(200,1);
//                  console.log($(modal_id));
                	// play the video:
                	e.preventDefault();
                	
                	return false;
                });
            });
            
            function close_modal(modal_id, keepOverlay){
//            	console.log("close_modal(" + modal_id +", " + keepOverlay + ")");
            	/* Hide overlay */
            	if(keepOverlay !== true)
            		$.sbcOverlay.hide(10);
            	
            	/* Unbind events */
            	$("a.close").unbind('click',closeHandler);
            	$("#sbc_overlay").unbind('click',closeHandler);
            	$("#sbc_overlay").unbind('closemodal',closeHandler);
            	
            	/* Hide modal */
            	$(modal_id).css({ 'display' : 'none' });
            	return false;
            }
    
        }
    });
     
})(jQuery);

/* Display a mask */
(function($){
    $.extend({
        sbcOverlay:  {
        	show: function(zIndex) {
            	//console.log("sbcOverlay.show(" + zIndex + ")");
        		/* Create the mask div */
        		if($("#sbc_overlay",'body').size() == 0) {
        			var overlay = $('<div id="sbc_overlay">').css({opacity:0,position:'absolute',background:'#000'});
        			$("body").prepend(overlay);
        			$(window).resize( function() {
        				if( $("#sbc_overlay",'body').data('displayed') == true )
        					$.sbcOverlay.positionMask();
        			});
        		}

        		/* Position mask on page */
           		$.sbcOverlay.positionMask();

        		$("#sbc_overlay",'body').css({ 'z-index':zIndex });
        		if( $("#sbc_overlay",'body').data('displayed') != true) {
        			$("#sbc_overlay",'body').stop();
        			$("#sbc_overlay",'body').animate({opacity:0.8});
        		}
        			
        		$("#sbc_overlay",'body').data('displayed',true);
        	},
        	positionMask: function() {
        		var w = $("html").innerWidth();
        		var h = $("body").innerHeight();
        		h = h + 700;
        		var offset = $("html").offset();
        		var left = offset.left;
        		var top = offset.top;
        		left+= parseInt($("html").css('border-left-width'));
        		top+= parseInt($("html").css('border-top-width'));

        		$("#sbc_overlay",'body').css({
        			width:w, 
        			height:h,
        			left:left,
        			top:top
        		});
        	},
        	hide: function(delayTime) {
        		if($("#sbc_overlay",'body').size() == 0)
        			return;
        		$("#cmask",'body').data('displayed',false);
        		if(delayTime == undefined)
        			delayTime = 500;
        		$("#sbc_overlay",'body').animate({opacity:0}, delayTime, function(){ $(this).remove(); });
        	}
        }
    });
})(jQuery);