[英]Popup modal and jump to anchor inside
我正在尝试创建一个链接,单击该链接时会弹出一个模式,并且还会跳转到其中的锚点。
目前你会看到我有一些弹出代码(为一组嵌套模式配置),因此它不是标准设置。
当您单击链接两次时,它们会起作用。 我怎样才能让它按原样工作,只需单击一下。
这是一个小提琴
//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); });
.modal{ width: 300px; height: 200px; overflow: auto; display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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>
问题是布局只有在两个点击处理程序都完成后才会更新。 一个快速的解决方法是用requestAnimationFrame
包装一个处理程序:
$('.item1').on('click',function(){ requestAnimationFrame(() =>
$('#contributors').animate( { scrollTop: $('#item1').offset().top -40 }, 500)
)});
这是因为当您单击 item1 时,您同时触发了两个单击处理程序,一个来自$('.element-item')
和一个来自$('.item1')
。 并且$('#item1').offset().top
将是 0 因为它与display: none
的容器。 您需要在设置显示后触发它。 像@marzelin 所做的那样,这是更简单的方法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.