Question

我正在处理某人的代码，他们使用jquery UI Dialog来显示所有弹出窗口。问题是页面保持滚动到顶部，而对话框保留在打开的任何地方。这是代码：

$('body').on('click', 'a[href$="#dialog"]', function(e) {
    e.preventDefault();
    $('#contact-popup').dialog({
        title: 'Contact',
        modal: true,
        width: 328,
        show: {effect: 'fade', duration: 400},
        hide: {effect: 'fade', duration: 400},
        resizable: false,
        draggable: false,
        open: function() {
            $('#contact-popup form').show();
            $('#thanks').hide();
        }
    })
    return false;
});

我已尝试e.preventDefault()，return false，但它仍会滚动到页面顶部。

我正在通过锚点调用对话框：<a href="#dialog">Click Here</a>

我是否需要更改调用对话框的方式？或者我在这里做错了什么？

以下是链接，您可以对其进行测试：test.persogenics.com/hire/interview-guide/

尝试将对话框“打开”放入常规js函数 - 无法正常工作 - 仍然滚动到顶部：

js:
function popup() {
    $('#contact-popup').dialog()
    return false;
};

html:
<button onClick="popup();">Click Me</button>

这意味着它不是锚定问题，对吧？

Answer 1

发现问题！事实证明，这个问题是我创建的一个绝对定位输入，用于“欺骗”对话框UI，而不是自动聚焦于任何实际输入。

<div id="contact-popup" style="display:none">

--> <input type='text' style='position:absolute; top:-9999px;' />

    <form method="post" action="../../email.php">
        <h5>Leave us your contact info and we'll get in touch.</h5>
        <div data-role="fieldcontain">
            <input type="text" name="first-name" value="" class="required">

我猜这会超出页面视图，因为它会将其推到顶端。

现在我知道你不仅要小心你如何编写jQuery，还要注意你在对话框弹出窗口中添加的内容！

感谢大家对此的帮助！

Answer 2

问题可能是您使用的锚点指向页面中的锚点通常的做法是将“javascript：void（0）”作为href传递，在您的情况下，您通过它的href检测特定锚点，以便解决您可以将类传递给指向对话框并通过选择的锚点标记那。也许是这样的

<a class="dialog_link" href="javascript:void(0)" >

和JQuery

$('body').on('click', ',dialog_link', function(e) {
e.preventDefault();
$('#contact-popup').dialog({
    title: 'Contact',
    modal: true,
    width: 328,
    show: {effect: 'fade', duration: 400},
    hide: {effect: 'fade', duration: 400},
    resizable: false,
    draggable: false,
    open: function() {
        $('#contact-popup form').show();
        $('#thanks').hide();
    }
})
return false;

}）;

jQuery Dialog UI无限滚动到顶部

2 个答案: