Please disregard the stuff below the asterisks. I've added a fiddle since the snippets I provided weren't very useful then I first posted this.
Fiddle: https://jsfiddle.net/erobertwald/gc0fod1b/57/
When I click on 'Menu 1', the modal appears, and the content also appears. When I click the the modal anywhere around the panel the modal disappears and I'm assuming the nested content also disappears because when I click on 'Menu 1' again, the modal appears but the nested content does not. (Not sure why, but in the fiddle, the 'X' (close) button doesn't work at the moment.)
Trying to figure out what's causing the problem.
************************* Original Post ******************************
I've added these events to an element using the following:
$(document).on('click', '#site-header > div:nth-child(1)', toggleGalleriesModal);
$(document).on('click', '#modal-close-button', toggleModal);
$(document).on('click', '#modal-backdrop', toggleModal);
Which fires this function every time:
function toggleGalleriesModal(){
var content = $('<div id="galleries-modal-content">');
toggleModal('Galleries', content);
}
in the toggleModal() function, I'm toggling the visibility of the modal itself, and then content nested inside it:
function toggleModal(label, content){
window.event.stopPropagation();
if(content != null) currentModalContent = content;
currentModalContent.toggleClass('active');
$('#modal').toggleClass('visible');
}
When I click on the #site-header > div:nth-child(1)
element, the modal appears, and the content also appears. When I click either #modal-close-button
or #modal-backdrop
the modal disappears and I'm assuming the nested content also disappears because when I click on #site-header > div:nth-child(1)
again, the modal appears but the nested content does not.
Really stumped here. I've been chasing my tail on this and looking online but haven't figured out or found a solution.