jQuery對話框用戶界面不確定地滾動到頂部

我正在處理某人的代碼，他們使用jQuery UI對話框來顯示所有彈出窗口。問題在於，頁面始終滾動到頂部，而對話框仍保留在其打開的位置。下面的代碼：jQuery對話框用戶界面不確定地滾動到頂部

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

這意味着它不是一個錨點問題，..對嗎？

來源

2013-02-27 geoctrl

我在想這裏還有別的事情要做。防止默認會停止頁面跳轉，並且返回false也會停止。任何其他的代碼可能涉及到？ – Ohgodwhy 2013-02-27 22:29:10

@Ohgodwhy - 添加了另一個使用相同ID的代碼片段 - 不知道這是否意味着什麼。任何幫助表示讚賞 – geoctrl 2013-02-27 22:36:12

頁面沒有滾動到頂端對我來說...（使用IE9） – tymeJV 2013-02-27 22:51:57

發現問題！事實證明，這個問題是我創造的一個絕對位置輸入，用於「欺騙」對話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-28 14:07:06 geoctrl

問題可能是您使用的錨點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-27 22:52:09

我以爲同樣的事情 - 但是當你檢查頁面源代碼時，任何地方都沒有'id =「對話框''的實例。是的，我試過'javascript：void（0）「'無濟於事...... – geoctrl 2013-02-27 22:58:26

jQuery對話框用戶界面不確定地滾動到頂部

回答

相關問題