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%'
    });

结合位置：修复你应该发现它的行为和你想要的一样，并且代码少得多。

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的位置。

使用Kendo示例 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();
});

KendoUI窗口固定在页面滚动的位置

4 个答案: