jquery.custom.modal.js 4.75 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(JSS){
 
    JSS.fn.extend({
         
        sbcModal: function(options) {
 
            var defaults = {};
                 
            options = JSS.extend(defaults, options);
            var closeHandler = null;
 
            return this.each(function() {
                var o = options;
                
                /* Open modal */
                JSS(this).click(function(e) {
                	var modal_id = JSS(this).attr("href");

                	/* Define a close handler for closing of the modal */
                	closeHandler = function(event,data) {
                		if( !JSS(event.target).parents("#"+modal_id).size() == 1
                			|| JSS(event.target).hasClass('close')
                			) {
                			close_modal("#"+modal_id,data);
                		}
                		return false;
                	};
                    
                	/* Show overlay */
                	JSS.sbcOverlay.show(5001);
                	
                	/* Bind it to click and custom event to allow external control */
                  JSS("a.close").click(closeHandler);
                  JSS("#sbc_overlay").click(closeHandler);
                	JSS("#sbc_overlay").bind('closemodal',closeHandler);

                	/* Position and display */
                	var modal_height = JSS("#"+modal_id).outerHeight();
                	var modal_width = JSS("#"+modal_id).outerWidth();

                	JSS("#"+modal_id).css({
                		'display' : 'block',
                		'position' : 'fixed',
//                		'opacity' : 0,
                		'z-index': 5002,
                		'left' : 50 + '%',
                		'margin-left' : -(modal_width/2) + "px",
                		'top': 50 + '%',
                		'margin-top' : -(modal_height/2) + "px"
                	});
 //               	JSS("#".modal_id).fadeTo(200,1);
//                  console.log(JSS(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)
            		JSS.sbcOverlay.hide(10);
            	
            	/* Unbind events */
            	JSS("a.close").unbind('click',closeHandler);
            	JSS("#sbc_overlay").unbind('click',closeHandler);
            	JSS("#sbc_overlay").unbind('closemodal',closeHandler);
            	
            	/* Hide modal */
            	JSS(modal_id).css({ 'display' : 'none' });
            	return false;
            }
    
        }
    });
     
})(jQuery);

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

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

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

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