Popup modal and jump to anchor inside

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; }

Here is a fiddle

Hi @j7f4f2a4fds2, event listeners are getting called in the order in which they were added; so the problem is that you’re first attempting to scroll the referenced element into view, and opening the modal afterwards. It will work however if the element is already visible, so you’ll have to add the animation click handler inside the document ready callback as well:

$(function () {
  // Set up modal
  // ...
  // Set up scrolling
})
1 Like

Yes thanks @ m3g4p0p

the following seems to work fine

$('.item1').on('click',function(){ requestAnimationFrame(() => 

    $('#contributors').animate( { scrollTop: $('#item1').offset().top -40 }, 500)

)});
1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.