KendoUI窗口頁面滾動固定位置

我有一個滾動條的長頁面。當我打開一個模態kenoWindow並滾動頁面時，窗口就會離開查看區域。我怎樣才能強制窗戶留在原來的位置？我想使它的位置固定的：KendoUI窗口頁面滾動固定位置

div.k-window 
{ 
    position:fixed !important; 
}

但是，如果我嘗試移動窗口，它跳下來（根據頁面的滾動位置）。

有什麼想法？

來源

2013-01-09 Mahmoodvcs

，如果不知道我理解你的問題。你想讓窗口留在中心還是留在你放置的位置（窗口可以拖動）？ – OnaBai

我希望它留在我放置的地方。 – Mahmoodvcs

我有它的工作重新定位頁面滾動事件的窗口。

var fixedPosWindows = null; 
var currentWindowScrollPos; 

function FixWindowPos(kwin) { 
    if (fixedPosWindows === null) { 
     fixedPosWindows = []; 
     currentWindowScrollPos = $(window).scrollTop(); 
     $(window).scroll(function() { 
      var top = $(window).scrollTop(); 
      var diff = top - currentWindowScrollPos; 
      for (var i = 0; i < fixedPosWindows.length ; i++) { 
       var w = fixedPosWindows[i].parent(); 
       w.css("top", parseInt(w.css("top"), 10) + diff + "px"); 
      } 
      currentWindowScrollPos = top; 
     }); 
    } 
    fixedPosWindows.push(kwin); 
}

然後我呼籲，我希望有固定的位置，每個窗口的功能：

var w = $("#window").kendoWindow(); 
FixWindowPos(w);

，如果你摧毀一個窗口，它不會從數組中刪除。所以如果這是一個很長的活頁面，並且有很多窗口被破壞和重新創建，它可能會有一些性能。但在大多數情況下，這不是問題。

編輯： 這裏是的jsfiddle：http://jsfiddle.net/mahmoodvcs/GXwfN/

任何更好的主意嗎？

來源

2013-01-09 22:52:27 Mahmoodvcs

有一個更簡單/更好的方法。該片段下面將從頂部中心的圖像在屏幕上的位置20％，即使您滾動：

$('#window').data('kendoWindow').center(); 

$('#window').closest(".k-window").css({ 
     position: 'fixed', 
     margin: 'auto', 
     top: '20%' 
    });

結合的位置是：固定的，你應該找到它的行爲您正在尋找，並用更少的代碼。

來源

2013-01-30 05:42:07 GP24

然後你不能拖動窗口嗎？你嘗試過嗎？我認爲這與問題中的解決方法沒有太大區別。 – Mahmoodvcs

啊，我不能說那是你試圖做你的問題。不，它會被固定（並且可向左或向右拖動），但在滾動時會移動。 – GP24

我有了這個解決方案，但它涉及到jQuery的位置

var kendo_wnd = $("#window") .kendoWindow({ title: "Title of Window", modal: true, visible: false, resizable: false, width: 500, open: function (e) { var currentWindow = $(this.element); currentWindow.closest(".k-window").position({ my: "center", at: "center", of: window }).css("position", "fixed"); // Some Code; } }).data("kendoWindow");

來源

2014-12-09 18:39:22 KakashiJack

我喜歡KakashiJack的解決方案，但最終簡化多一點。使用Kendo的內置中心函數而不是JQuery的位置。

使用劍道例如在 http://docs.telerik.com/kendo-ui/web/window/overview#initialize-window-center-and-configure-button-click-action

$(document).ready(function(){ 
    var win = $("#window").kendoWindow({ 
     height: "200px", 
     title: "Centered Window", 
     visible: false, 
     width: "200px", 
     open: function (e) {$(this.element).closest(".k-window").css("position", "fixed")} 
    }).data("kendoWindow"); 
}); 

$("#openButton").click(function(){ 
    var win = $("#window").data("kendoWindow"); 
    win.center(); 
    win.open(); 
});

來源

2015-08-22 12:21:27 ChrisRSA

KendoUI窗口頁面滾動固定位置

回答

相關問題