javascript 页面滚动时KendoUI窗口固定位置

KendoUI window fixed position on page scrolling

提问by Mahmoodvcs

I have a long page with scroll bars. When I open a modal kenoWindow and scroll the page, the window goes off the viewing area. How can I force the window to stay where it is? I thought of making it's position fixed:

我有一个带有滚动条的长页面。当我打开模态 kenoWindow 并滚动页面时，窗口会离开查看区域。如何强制窗口保持原位？我想把它的位置固定：

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

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

But if I try to move the window, it jumps down (depending on the scroll position of the page).

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

Any idea?

任何的想法？

采纳答案by Mahmoodvcs

I've got it working with re-positioning the window on page scroll event.

我已经让它在页面滚动事件上重新定位窗口。

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

then I call the function for every window that I want to have fixed position:

然后我为每个我想要固定位置的窗口调用函数：

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

if you destroy a window, it will not remove from the array. so if it's a long living page with a lot of windows that are destroyed and recreated, it may have some performance isuues. But in most cases it's not a problem.

如果您销毁一个窗口，它不会从数组中删除。所以如果它是一个长期存在的页面，有很多被破坏和重新创建的窗口，它可能会有一些性能问题。但在大多数情况下，这不是问题。

Edit:Here is the jsfiddle: http://jsfiddle.net/mahmoodvcs/GXwfN/

编辑：这是 jsfiddle：http: //jsfiddle.net/mahmoodvcs/GXwfN/

Any better idea?

有什么更好的主意吗？

回答by GP24

There is an easier/better way. The snippet below will center the image on screen and position 20% from the top, even as you scroll:

有一种更简单/更好的方法。下面的代码段将使图像在屏幕上居中并从顶部定位 20%，即使您滚动：

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

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

Combined with position:fixed you should find it behaves as you are looking for, and with much less code.

结合 position:fixed 您应该会发现它的行为符合您的要求，并且代码更少。

回答by KakashiHyman

I've got this solution, but it involves jQuery position

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

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");

回答by KakashiHyman

I liked KakashiHyman's solution, but ended up simplifying it a bit more. Using Kendo's built in center function instead of JQuery's position.

我喜欢 KakashiHyman 的解决方案，但最终将其简化了一点。使用 Kendo 的内置 center 函数而不是 JQuery 的位置。

Using the Kendo example at http://docs.telerik.com/kendo-ui/web/window/overview#initialize-window-center-and-configure-button-click-action

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