0

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

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

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

任何想法？

4

4 回答 4

3

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

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

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

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

于 2013-01-30T05:42:07.397 回答
0

我有这个解决方案，但它涉及 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-09T18:39:22.513 回答
0

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

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-09T22:52:27.613 回答
0

我喜欢 KakashiJack 的解决方案，但最终简化了一点。使用 Kendo 的内置 center 函数而不是 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-22T12:21:27.837 回答