鼠标窗口固定位置，页面滚动

KendoUI window fixed position on page scrolling

本文关键字：滚动 位置 窗口 定位 鼠标      更新时间：2023-09-26

我有一个带有滚动条的长页面。当我打开一个模态kenoWindow并滚动页面时，窗口会离开查看区域。我怎样才能把窗户固定在原来的地方?我想让它的位置固定:

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

但是如果我试图移动窗口，它会向下跳(取决于页面的滚动位置)。

任何想法?

有一个更简单/更好的方法。下面的代码片段将使图像在屏幕上居中，并位于距离顶部20%的位置，即使在滚动时也是如此:

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

结合position:fixed，你会发现它的行为和你想要的一样，而且代码更少。

我已经得到它的工作与重新定位窗口的页面滚动事件。

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/

有更好的主意吗?

我已经得到了这个解决方案，但它涉及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");

我喜欢KakashiJack的解决方案，但最终还是简化了它。使用Kendo内置的center函数代替JQuery的position

使用剑道的例子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();
});
相关文章：