Dan Lee Dan Lee - 20 days ago 6
CSS Question

Closing an Overlay Div on Click

I have two buttons that open and close an overlay div.

.trigger-overlay which is used to show a menu and .overlay-close which is used with multiple overlays to close them.

.wrap wraps all content and which slides right when an overlay is opened by adding the class .wrap-open

This works .trigger-overlay is clicked but not when .overlay-close is clicked. See example. (click link 1 or link 2 in second slide).

What do I need to do to the below JS code to remove .wrap-open when .overlay-close is clicked?

JS Fiddle:
https://jsfiddle.net/cgx8zu2h/

Working Example:
https://www.uk-cpi.com/temp-js/annual-review/

The JavaScript


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

function toggleOverlay() {
var overlay = document.getElementById(this.getAttribute('data-href'));

// If overlay is open
if (classie.has(overlay, 'zap')) {

classie.remove(overlay, 'zap');
classie.remove(wrap, 'wrap-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();
}
}

// If overlay isn't closed
else if (!classie.has(overlay, 'close')) {
classie.add(overlay, 'zap');
classie.add(wrap, 'wrap-open');
}
// If overlay is closed
else if (classie.has(overlay, 'close')) {
classie.add(overlay, 'zap');
classie.add(wrap, 'wrap-open');
}
}



for (var i = 0; i < triggerBttn.length; i++) {
triggerBttn[i].addEventListener('click', toggleOverlay);
}

//counts number of closeBttn and remove zap on click for all
for (var i = 0; i < closeBttn.length; i++) {
closeBttn[i].addEventListener('click', function() {
this.parentNode.className = this.parentNode.className.replace(/(?:^|\s)zap(?!\S)/g, '');
});
}
})();



Answer

As you can see - basically I just told #menu to be at z-index: 180 .. but I also eliminated your usage of 'classie', as jquery already has that. And although it's good you know the pure-JS way to get stuff done, if you're already loading jquery why not leverage it? https://jsfiddle.net/te0s2e86/1/

#menu{ z-index: 180; }
Comments