Показать сообщение отдельно
  #1 (permalink)  
Старый 02.08.2014, 12:27
Аватар для condpattern
Интересующийся
Отправить личное сообщение для condpattern Посмотреть профиль Найти все сообщения от condpattern
 
Регистрация: 30.07.2014
Сообщений: 17

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, 02.08.2014 в 12:29.
Ответить с цитированием