0

スクロールバーのある長いページがあります。モーダルケノウィンドウを開いてページをスクロールすると、ウィンドウが表示領域から外れます。どうすればウィンドウを強制的にその場所にとどまらせることができますか？位置を固定することを考えました：

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

ページスクロールイベントでウィンドウを再配置することで機能するようになりました。

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

私はこの解決策を持っていますが、それは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

私はKakashiJackのソリューションが好きでしたが、結局それをもう少し単純化することになりました。JQueryの位置の代わりに、Kendoの組み込みのcenter関数を使用します。

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();
});
于 2015-08-22T12:21:27.837 に答える