jQuery对话框UI无限滚动到顶部

Question

我正在处理某人的代码，他们对所有弹出窗口都使用了jQuery UI对话框。 问题在于，将对话框保留在打开位置时，页面始终滚动到顶部。 这是代码：

$('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

问题可能是您正在使用指向页面内锚点的锚点URL，通常的做法是将“ 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;

}）;