1

私は誰かのコードに取り組んでおり、彼らはすべてのポップアップにjqueryUIダイアログを使用していました。問題は、ダイアログが開いた場所にダイアログが残っている間、ページが一番上までスクロールし続けることです。コードは次のとおりです。

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

これは、アンカーの問題ではないことを意味します。

4

2 に答える 2

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 の書き方だけでなく、ダイアログ ポップアップに入力する内容にも注意する必要があることがわかりました。

これについてご協力いただきありがとうございます。

于 2013-02-28T14:07:06.820 に答える
0

問題は、ページ内のアンカーを指すアンカー 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;

});

于 2013-02-27T22:52:09.207 に答える