Hi all,
I am trying to create a link that when clicked, a modal pops up, and also jumps to an anchor in it.
At the moment you will see i have some code for the pop up (which is configured for a set of nested modals) hence it is not your standard setup.
When you click on the links twice, they work. How can I get it to work as is, with one click only.
Thanks
HTML
<a href="#contributors" class="element-item item1">item1</a> <a href="#contributors" class="element-item item2">item2</a> <!-- The Modal --> <div id="contributors" class="modal"> <header><span class="close">×</span></header> line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line <div class="item" id="item1"><h4>Item 1</h4></div> <br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line <div class="item" id="item2"><h4>Item 2</h4></div> <br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line </div>
JS
//popup nested modals $(function () { const openModals = []; $('.element-item').click(e => { e.preventDefault(); $(e.currentTarget).closest('.modal').add('body').addClass('open'); openModals.push($($(e.currentTarget).attr('href')).show()); }); $(window).add('.close').click(e => { e.stopPropagation(); if ($(e.target).is('.modal, .close')) { const closing = openModals.pop().addClass('modal-content-active'); setTimeout(() => {closing.hide().removeClass('modal-content-active')}, 0); if (openModals.length > 0) { openModals[openModals.length - 1].removeClass('open'); } else $('body').removeClass('open'); } }); }); //jump to anchor in modal $('.item1').on('click',function(){ $('#contributors').animate( { scrollTop: $('#item1').offset().top -40 }, 500); }); $('.item2').on('click',function(){ $('#contributors').animate( { scrollTop: $('#item2').offset().top -40 }, 500); });
CSS
.modal{ width: 300px; height: 200px; overflow: auto; display: none; }`
`