窗口向上滾動時的jQuery對話框打開

我試圖打開使用jQuery 1.4和jQuery-UI-1.8rc3.custom.js一個模式對話框的jQuery窗口向上滾動時的jQuery對話框打開

對話框打開了沒有任何問題，在所有瀏覽器，但在IE 7和6中，在對話框打開後，窗口會自動滾動到按鈕...我嘗試將窗口向上滾動回模態位置，但非常不一致。使用下面的代碼行開拓模式後

window.scrollTo($('#selector').dialog('option', 'position')[0],$('#selector').dialog('option', 'position')[1]);

我注意到一個奇怪的是，之後我打開模式，頁面變成巨大......如果一些額外的東西就增加了高達底部......並最終滾動到底部。任何想法，爲什麼這可能

<div id="selector"> 
</div>

中的document.ready

$('#selector').dialog({ 
    bgiframe: true, 
    autoOpen: false, 
    width: 100, 
    height: 100, 
    modal: true, 
    position: 'top' 
});

在JS

$('#selector').dialog('open');

來源

2010-05-05 zoom_pat277

被hapenning

中的HTML像你缺少的#你選擇器：

window.scrollTo($('#selector').dialog('option', 'position')[0], $('#selector').dialog('option', 'position')[1]);

這可能是窗口滾動到左上角的原因。

編輯：我只是在看文檔和.dialog('option','position')默認值是center。

位置類型：String，數組默認值：

'中心' 指定應顯示的對話框，在此。可能的值：1）在視口中代表位置的單個字符串：'center'，'left'， 'right'，'top'，'bottom'。 2）包含x，y座標對的陣列，所述x，y座標對來自左邊，視口的頂角（例如[350,100]）的像素偏移; 3）包含x，y位置字符串值（例如['right' 'top']右上角轉角）。

因此，您可以使用位置選項返回文本或數字，window.scrollTo()需要數字。因此，嘗試這個：

var d = $(".ui-dialog").position(); 
window.scrollTo(d.left , d.top);

來源

2010-05-06 00:57:23 Mottie

哦......我想我錯過了它，當我複製代碼到stackoflow.com和編輯它，它確實有「＃」標誌...謝謝指點出來雖然！ – 2010-05-06 02:18:02

我已經更新了我的答案。 – Mottie 2010-05-06 03:16:10

對不起，我沒有機會實施你的建議，直到現在。給我幾個小時，我會回到你身邊。非常感謝您回覆！ – 2010-05-06 23:10:23

我也有過類似情況的對話框中打開它應該在頁面上，但用戶被重定向到頁面的底部。基本上，我忘了包含適當的CSS來匹配jQuery UI JavaScript庫。通過這樣做一切都很好。我想這是類似的東西，在jQuery css中的元素上設置了樣式，這些元素不是在你自己的css中設置的。

爲了調試問題，我不必包含整個jQuery UI css，我做了兩個相同的頁面，一個使用jQuery UI css，一個沒有，只是通過Firefox上的Firebug檢查了css中的不同內容並將這些樣式添加到我的CSS。

希望它有幫助。 Mag

來源

2010-05-26 14:11:54 Mag

我也在爲這個問題苦苦掙扎。我沒有使用任何的主題化，所以我沒有這個重要的CSS屬性：

position:absolute;

我將此添加到我的CSS文件，現在一切工作正常：

.ui-widget { position: absolute; }

來源

2010-08-03 19:05:50 telecasterrok

這並沒有爲我工作 – Mike 2014-09-24 23:26:24

如果您在使用像下面的錨標記，以觸發對話框

<a href="#" onclick="$(#id).dialog('open');">open dialog</a>

你要添加一個return false;到onclick屬性：

<a href="#" onclick="$(#id).dialog('open'); return false;">open dialog</a>

這樣可以防止頁面重新加載，從而導致頁面跳轉到頂部，從而導致頁面重新加載#。

position: relative;

這是壓倒一切的：

position: absolute;

需要通過對話

來源

2010-08-06 14:00:42 bassim

這真的有幫助。當我打開一個模式時，在FF中，屏幕會滾動到頂部，但模態會保持放置狀態。 – Adam 2012-08-16 18:34:53

我，因爲我是分配類的對話框，在我的樣式表中設定了這個問題。

基本上，作出一定的的.ui-對話框類有：

position: absolute;

和窗口不應該滾動到頁面底部和額外的垂直空間將不會被添加到身體。

來源

2012-02-24 15:22:50

我如何固定它：

HTML

<a href="javascript:openDialogFunction(parameters)">...</a>

的Javascript

function openDialogFunction(parameters) { 

    var topOff = $(window).scrollTop(); 

    //code to open the dialog 

    $(window).scrollTop(topOff); 
}

來源

2013-03-08 16:05:30

我有類似的問題，我這是怎麼解決的。它類似於@bassim解決方案，但它有一點不同的味道。

我有同樣的錨標記，並用「$（＃錨元素）。點擊（函數（）{..}下面的代碼片段 -

在JSP -

<a id="open-add-comments-${site}" class="open-add-comments" href="#" site-id="${site}" project-id="${project}" >Add comments</a><br/>

在javascript中 - 。

$(".open-add-comments").click(function(){ 

    var projectId=$(this).attr("project-id"); 

    $("#add-comment-form").dialog({ 
     //width: "auto", 
     width: 800, 
     height: "auto", 
     position: "absolute", 
     maxWidth: 800, 
     minWidth: 300, 
     maxHeight: 400, 
     modal: true, 
     title: "Adding comment for \"${project.name}\" and site \""+siteName+"\" ", 
     open: function(event, ui) { 

     $("#add-comment fieldset textarea").html("").focus(); 
      ............ 
      ..... 
     }, 
     buttons: { 
      "Save": function() { 

      .... some business logic 

      }, 
      Cancel: function() { 
       $(this).dialog("close"); 

      } 
     } 

    }); 

    return false; // -- THIS IS IMPORTANT AND RESOLVED THE ISSUE 

});

這並獲得成功，並解決了這個問題非常感謝您休息在此頁面中誰給了很好的三分球，並幫助解決問題榮譽團隊

來源

2013-03-20 21:21:22 Sirish

另一個解決方案是調用事件。的preventDefault當對話框打開

$('#demo4').click(function() { 
    $("#tallContent").dialog("open"); 
    event.preventDefault(); 
});

來源

2013-06-15 07:03:56 Agustincl

窗口向上滾動時的jQuery對話框打開

回答

相關問題