KendoUI窗口在頁面滾動中的固定位置

Question

我的頁面很長，帶有滾動條。 當我打開模態kenoWindow並滾動頁面時，該窗口將離開查看區域。 我怎樣才能迫使窗戶留在原處？ 我想到了使其位置固定：

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

但是，如果我嘗試移動窗口，則窗口會跳下（取決於頁面的滾動位置）。

任何想法？

Answer 1

有一種更簡單/更好的方法。 下面的代碼段將使圖像在屏幕上居中，並且即使您滾動也可以將圖像從頂部移到20％的位置：

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

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

與position：fixed結合使用，您應該發現它的行為符合您的期望，並且代碼更少。

Answer 2

我已經完成了在頁面滾動事件上重新放置窗口的工作。

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/

有更好的主意嗎？

Answer 3

我有此解決方案，但它涉及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");

Answer 4

我喜歡KakashiJack的解決方案，但最終對其進行了簡化。 使用Kendo的內置中心函數代替JQuery的位置。

使用位於http://docs.telerik.com/kendo-ui/web/window/overview#initialize-window-center-and-configure-button-click-action的Kendo示例

$(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();
});