滚动到区域后打开弹出窗口

Question

我有一个在页面加载时消失的弹出窗口：

$("#popup").fadeIn(500).on("load", function(e){
    $('body').addClass('modalIn');
});

在弹出窗口中有 link 滚动到 div #section 其中包含另一个 link 触发另一个弹出窗口：

<a href="#section">learn more</a>

在 div #section 中打开我的弹出窗口的代码（准备在那里有另一个弹出窗口）。

$(".steps a").on("click", function(e){
    e.preventDefault();
    var selectedModal = $(this).data("modal");
    $(".modals").fadeIn();
    $(".modal").hide();
    $("#"+selectedModal).fadeIn();
    $('body').addClass('modalIn');
    $.scrollify.disable();
    $('body').on('scroll', function(e){
        e.preventDefault();
    });
})
$(".modals").on("click", function(){
    $(".modals, .modal").fadeOut();
    $('body').removeClass('modalIn');
    $.scrollify.enable();       
});

我的 div #section 包含以下 link:

<a href="#modal-1" data-target="#myModal" data-modal="modal-1">Open modal 1</a>

我想在用户单击第一个弹出窗口（在页面加载时显示）中的 link "Read more" 时自动打开另一个弹出窗口 #modal-1。

我尝试使用 scrollTo 插件通过以下代码实现此功能，但不幸的是，这无法正常工作。

第一个弹出窗口在页面加载时消失，我单击 link 到#section，紧接着该脚本显示警报 window（用于测试）关闭警报后 window 页面滚动到＃部分。

如何使其仅在 window 滚动到 div #section（到达它）后才显示 alert/trigger 弹出窗口？

$('a[href="#section"]').click(function() {
$(window).scrollTo('#section', {
    onAfter: function() {
        alert('test');
    }
})
});

Answer 1

我认为您必须将警报放在 setTimeout 中。警报将在页面事件有机会完成之前触发。即使您将它放在延迟为 0 的 setTimeout 中，setTimeout 也会将警报放到堆栈底部，让您的代码有时间完成。试试这个：

$('a[href="#section"]').click(function() {
  $(window).scrollTo('#section', {
   onAfter: function() {
    setTimeout(function () {
       alert('test');
     }, 100)

  })
});

滚动到区域后打开弹出窗口

Open popup after scroll to area

html

jquery

popup

scrollto