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.) - Edit: Would have helped if I had the right ID!)
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.
#modal-close-button
and#modal-backdrop
aren't passing thelabel
andcontent
arguments totoggleModal()
. – Barmar Feb 22 '19 at 17:53window.event.
is bad code, that is not how modern browsers work. – epascarello Feb 22 '19 at 17:54content
parameter. It's a newly-created DOM element, but you never add it to the DOM anywhere. – Barmar Feb 22 '19 at 17:54