Question

我有以下代码，并且只想在用户滚动超过1200px后才加载对话框。我也试图让show变量放慢速度：

$(function() {
$( "#dialog" ).dialog({
    autoOpen: true,
    width: 200,
    height: 200,
    show: 'slide',
    hide: 'puff',
});
});

我正在使用scrollto来显示另一个div，它正在工作，所以希望使用相同的功能：

$(window).scroll(function() {
if ($(this).scrollTop() > 300) {
    $('.backtotop').fadeIn(500);
} else {
    $('.backtotop').fadeOut();
}
});

感谢您的帮助，凯尔

Answer 1

在初始代码集autoOpen: false中。这将阻止对话框在初始化时打开。然后，您可以使用与第二段代码中类似的滚动事件来专门调用$("#dialog").dialog("open")。

如果您希望show操作较慢，可以为动画添加其他选项。一个例子是：

$(function() {
    $( "#dialog" ).dialog({
        autoOpen: false,
        width: 200,
        height: 200,
        show: {
            effect: 'slide',
            duration: 2000 // 2 second duration
        },
        hide: 'puff'
     });
});

查看所有可用选项的dialog api 有两件事可以让它出现一次：

销毁对话框，或删除事件处理程序。

对于两者，您可以指定在关闭对话框时执行的函数，如下所示：

$(function() {
    $( "#dialog" ).dialog({
        autoOpen: false,
        width: 200,
        height: 200,
        show: {
            effect: 'slide',
            duration: 2000 // 2 second duration
        },
        hide: 'puff',
        close: function () {
            $("#dialog").dialog('destroy'); // this will remove the dialog
        }
     });
});

如果您希望保留对话框，则可以删除事件处理程序。您可以像这样修改滚动事件：

$(window).on("scroll.singleDialog", function () {
    if ($(this).scrollTop() > 1400) {
        $("#dialog").dialog("open");
    } else {
        $("#dialog").dialog("close");
    }
});

然后在关闭函数中删除这样的事件：

close : function () {
    $(window).off("scroll.singleDialog");
}

.singleDialog只是我正在使用的示例命名空间。您可以使用您想要的特定处理程序名称。您可以查找jQuery .on（）和.off（）以获取更多信息。

Answer 2

你可以这样做

$(window).scroll(function() {
if ($(this).scrollTop() ==> 1200) {
       $( "#dialog" ).dialog({
         width: 200,
         height: 200,
         show: 'slide',
         hide: 'puff',
     });
}
});

希望这有帮助..

滚动时jquery对话框加载

2 个答案: