asked on

Multiple content overlay

Hello Experts,

I am using this script below to popup an overlay in a page. It works perfect.
The only issue I face for this project i am doing is .... I need to have more than one overlay (different content) and this script only uses one.

To make it simple... i have two small images on a page. when the user click on the image the overlay should show the corresponding image in full size. This script allow my only one content overlay.

Can anyone help?

(function() {
	var triggerBttn = document.getElementById( 'trigger-overlay' ),
		overlay = document.querySelector( 'div.overlay' ),
		closeBttn = overlay.querySelector( 'button.overlay-close' );
		transEndEventNames = {
			'WebkitTransition': 'webkitTransitionEnd',
			'MozTransition': 'transitionend',
			'OTransition': 'oTransitionEnd',
			'msTransition': 'MSTransitionEnd',
			'transition': 'transitionend'
		},
		transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
		support = { transitions : Modernizr.csstransitions };

	function toggleOverlay() {
		if( classie.has( overlay, 'open' ) ) {
			classie.remove( overlay, 'open' );
			classie.add( overlay, 'close' );
			var onEndTransitionFn = function( ev ) {
				if( support.transitions ) {
					if( ev.propertyName !== 'visibility' ) return;
					this.removeEventListener( transEndEventName, onEndTransitionFn );
				}
				classie.remove( overlay, 'close' );
			};
			if( support.transitions ) {
				overlay.addEventListener( transEndEventName, onEndTransitionFn );
			}
			else {
				onEndTransitionFn();
			}
		}
		else if( !classie.has( overlay, 'close' ) ) {
			classie.add( overlay, 'open' );
		}
	}
	triggerBttn.addEventListener( 'click', toggleOverlay );
	closeBttn.addEventListener( 'click', toggleOverlay );
})();

Open in new window

Member_2_248744

greetings Refael, , In your code you do not show the underlying code work needed for an Overlay DIV to, I guess cover the screen in a semi-transparent dark click restriction and have some centered div (image in your case) content shown, with some close buttons.
You must use some javascript "Framework" that does the code for you in the line -
classie.remove( overlay, 'open' );

If you are using their code work and setup, then you need to see if it can support a two content (images) overlay.

What do you want from a suggestion here from experts?

ASKER CERTIFIED SOLUTION

Robert Schutt

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Robert Schutt

PS: I assumed the code was found here: http://tympanus.net/Development/FullscreenOverlayStyles/
but it seems that code has been re-used a number of times, not sure what the ultimate source is...

PPS: you've posted this in the jQuery topic as well, I think there must be way better jQuery plugins to do something like this but because the code you posted was not using jQuery, I decided to try and provide a solution in pure JavaScript.

Refael

ASKER

Robert Schutt yet again, thank you so much. I can work with your code and tune to fit my result :-)