FullscreenOverlayStyles
 

Добрый день.
Есть такой демо пример http://tympanus.net/codrops/2014/02/...erlay-effects/
При клике на

id="trigger-overlay"

срабатывает скрипт

(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/close -->
		<div class="overlay overlay-hugeinc">
			<button type="button" class="overlay-close">Close</button>
			<nav>
				<ul>
					<li><a href="#">Home</a></li>
					<li><a href="#">About</a></li>
					<li><a href="#">Work</a></li>
					<li><a href="#">Clients</a></li>
					<li><a href="#">Contact</a></li>
				</ul>
			</nav>
		</div>

Подскажите, пожалуйста, можно ли сделать на одной странице несколько ссылок/ кнопок с, к примеру,

id="trigger-overlay"
id="trigger-overlay-2"
id="trigger-overlay-3"

Чтобы каждый раз отрабатывал данный скрипт и при этом выводились разные слои? Премного благодарю за помощь.

condpattern,
вместо id сделать класс и обойти циклом все кнопки навесив в функции обработку своего слоя.
замануха ... :write:

Rise,
http://cockos.com/licecap/

С заменой id на классы все ясно, а как навесить в функции обработку своего слоя?

closeBttn.addEventListener('click', function () {
            toggleOverlay(overlay)
        });

closeBttn и overlay -- вам надо как-то перед этим инициализировать.

Хорошо. Покапаюсь. Спасибо.

condpattern,
:)
http://video.yandex.ru/users/granica-ru/view/84/