javascript - onclick div trigger open overlay -

javascript - onclick div trigger open overlay -

i'm using overlay tutorial codrops can found here. person made tutorial used " trigger-overlay " id on button trigger overlay.

i'm trying create overlay trigger div same id ( id selector used 1 time ) mentioned there no multiple instances of id used.

i have given div on hover cursor:pointer, want overlay open when div clicked.

the html -

<div id="trigger-overlay"> <p>lorem ipsum</p> </div> <div class="overlay overlay-hugeinc"> <div class="row"> <div class="large-12 small-12 medium-12 columns"> <button type="button" class="overlay-close right">close</button> </div> <div class="large-12 medium-12 small-12 columns"> <div class="large-2 medium-2 small-12 columns"> <p class="main-p">about<br>differenxia</p> </div> </div> <div class="large-12 medium-12 small-12 columns"> <p> content fullscreen overlay </p> </div> </div> </div>

here script handling trigger -

(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' ) ], back upwards = { 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 ); })();

classie -

( function( window ) { 'use strict'; // class helper functions bonzo https://github.com/ded/bonzo function classreg( classname ) { homecoming new regexp("(^|\\s+)" + classname + "(\\s+|$)"); } // classlist back upwards class management // altho fair, api sucks because won't take multiple classes @ 1 time var hasclass, addclass, removeclass; if ( 'classlist' in document.documentelement ) { hasclass = function( elem, c ) { homecoming elem.classlist.contains( c ); }; addclass = function( elem, c ) { elem.classlist.add( c ); }; removeclass = function( elem, c ) { elem.classlist.remove( c ); }; } else { hasclass = function( elem, c ) { homecoming classreg( c ).test( elem.classname ); }; addclass = function( elem, c ) { if ( !hasclass( elem, c ) ) { elem.classname = elem.classname + ' ' + c; } }; removeclass = function( elem, c ) { elem.classname = elem.classname.replace( classreg( c ), ' ' ); }; } function toggleclass( elem, c ) { var fn = hasclass( elem, c ) ? removeclass : addclass; fn( elem, c ); } var classie = { // total names hasclass: hasclass, addclass: addclass, removeclass: removeclass, toggleclass: toggleclass, // short names has: hasclass, add: addclass, remove: removeclass, toggle: toggleclass }; // transport if ( typeof define === 'function' && define.amd ) { // amd define( classie ); } else { // browser global window.classie = classie; } })( window );

could post html or create sure not have id used anywhere else within html document.

otherwise first instance of id trigger event.

ie:

<p><button id="trigger-overlay" type="button">open overlay</button></p> <div id="trigger-overlay"><p>testing</p></div>

the above top button work, while below testing div not.

if want multiple areas trigger overlay, recommend importing jquery , adding classes elements want trigger. way implement overlay toggles so:

$('.triggerclass').click(function(){ toggleoverlay(); });

javascript jquery css overlay