Как сделать два всплывающих overlay на одной странице?

Question

[Юлия]

Как сделать два всплывающих окна на одной странице вот с такими эффектами: https://tympanus.net/Development/FullscreenOverlay... ?

Код overlay-1:

<button id="trigger-overlay">Открыть оверлей-2</button>
<div class="overlay overlay-slidedown">Содержимое оверлея-1</div>
      <button type="button" class="overlay-close-modal">Закрыть оверлей-1</button>

Код overlay-2:

<button id="trigger-overlay-modal" type="button">Открыть оверлей-2</button>
<div class="overlay modal overlay-scale">Содержимое оверлея-2</div>
    <button type="button" class="overlay-close-modal">Закрыть оверлей-2</button>

Внизу скрипт для первого оверлея. Какие здесь нужно изменить переменные в js, чтобы открывался второй оверлей? У меня при замене классов в скобках, кнопка все время открывает только первый 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 );

})();

Answer 1

[Sergey Epifanov]

нужно менять не только классы, но и id элемента.

var triggerBttn = document.getElementById( 'trigger-overlay-modal' )