jquery - JQueryモーダルボックスポジショニング

Question

大丈夫。モーダルボックスのポップアップウィンドウを使用して、動的テーブルのビジネスの詳細を表示しています。このテーブルは非常に長いです。すべてがモーダルボックスで正しく機能しますが、ページの一番下までスクロールすると、常にページの一番上にあるモーダルボックスが開きます。したがって、この方法で下にスクロールする必要があります。

現在、このコードを使用してモーダルボックスを中央に配置しています。

function centerPopup(x){
    //request data for centering
    var windowWidth = document.documentElement.clientWidth;
    var windowHeight = document.documentElement.clientHeight;
    var popupHeight = $("#popup" + x).height();
    var popupWidth = $("#popup" + x).width();
    //centering
    $("#popup" + x).css({
        "position": "absolute",
        "top": windowHeight/2-popupHeight/2,
        "left": windowWidth/2-popupWidth/4
    });
    //only need force for IE6

    $('#backgroundPopup').css({
        "height": windowHeight
    });

}

このコードに影響を及ぼしているものがあるかどうかはわかりません。回避策は、以前の場所までスクロールダウンする必要があることですが、.positionに関する多くのドキュメントを見つけることができませんでした。

score 3 · Accepted Answer

どうぞ：

var scrolledX = document.body.scrollLeft || document.documentElement.scrollLeft || self.pageXOffset;
var scrolledY = document.body.scrollTop || document.documentElement.scrollTop || self.pageYOffset;

var screenWidth = document.body.clientWidth || document.documentElement.clientWidth || self.innerWidth;
var screenHeight = document.body.clientHeight || document.documentElement.clientHeight || self.innerHeight;

var left = scrolledX + (screenWidth - $("#popup" + x).width())/2;
var top = scrolledY + (screenHeight - $("#popup" + x).height())/2;

//Use the top and left variables to set position of the DIV.

車輪の再発明には意味がないというredsquareに同意しますが、既存のプラグインを使用してください。

編集：最終的なコードは次のようになります。

function centerPopup(x)
{

    var scrolledX = document.body.scrollLeft || document.documentElement.scrollLeft || self.pageXOffset;
    var scrolledY = document.body.scrollTop || document.documentElement.scrollTop || self.pageYOffset;

    var screenWidth = document.body.clientWidth || document.documentElement.clientWidth || self.innerWidth;
    var screenHeight = document.body.clientHeight || document.documentElement.clientHeight || self.innerHeight;

    var left = scrolledX + (screenWidth - $("#popup" + x).width())/2;
    var top = scrolledY + (screenHeight - $("#popup" + x).height())/2;

    //centering
    $("#popup" + x).css({
        "position": "absolute",
        "top": top,
        "left": left
    });
    //only need force for IE6

    $('#backgroundPopup').css({
        "height": screenHeight
    });

}

score 2 · Accepted Answer

私にとっての簡単な解決策は、モーダルウィンドウの包含要素の CSS を次のように設定することでした。

position:fixed;

これは IE7+ で機能しましたが、IE6 では上記の高度な方法が必要になる場合があります。

score 1 · Accepted Answer

これは、jQuery UI ダイアログプラグインを拡張して、新しい「スティッキー」オプションを追加するための優れた方法です...

// This code block extends the ui dialog widget by adding a new boolean option 'sticky' which,
// by default, is set to false. When set to true on a dialog instance, it will keep the dialog's
// position 'anchored' regardless of window scrolling - neato.

// Start of ui dialog widget extension...
(function(){
    if($.ui !== undefined && $.ui.dialog !== undefined)
    {
        var UIDialogInit = $.ui.dialog.prototype._init;
        $.ui.dialog.prototype._init = function()
        {
            var self = this;
            UIDialogInit.apply(this, arguments);

            //save position on drag stop for sticky scrolling
            this.uiDialog.bind('dragstop', function(event, ui)
            {
                if (self.options.sticky === true)
                {
                    self.options.position = [(Math.floor(ui.position.left) - $(window).scrollLeft()),
                                             (Math.floor(ui.position.top) - $(window).scrollTop())];
                }
            });

            //we only want to do this once
            if ($.ui.dialog.dialogWindowScrollHandled === undefined)
            {
                $.ui.dialog.dialogWindowScrollHandled = true;
                $(window).scroll(function(e)
                {
                    $('.ui-dialog-content').each(function()
                    {   //check if it's in use and that it is sticky
                        if ($(this).dialog('isOpen') && $(this).dialog('option', 'sticky'))
                        {
                            $(this).dialog('option', 'position', $(this).dialog('option','position'));
                        }
                    });
                });
            }
        };

        $.ui.dialog.defaults.sticky = false;
    }
})();
// End of ui dialog widget extension...

score 0 · Accepted Answer

ModelPopupの位置を設定するための非常に良い答えです。これが皆さんの助けになりますように。

モーダルウィンドウに表示する位置を取得します。次のように Sys.UI.DomElement.getLocation メソッドを使用して、ASP.NET Ajax ライブラリを使用して実行できます。

var location = Sys.UI.DomElement.getLocation($get("div1"));

この場合、いくつかの div コントロールを使用して、その横にモーダルウィンドウを設定しました。

panel または div 要素を使用して、モーダルウィンドウの参照を取得します。
モーダルウィンドウの場所を設定します。

Sys.UI.DomElement.setLocation($get('panel1'), location.x,location.y);

score -2 · Accepted Answer

誰もがプラグインを使用するように言う理由がわかりません..なぜ車輪を再発明するのですか. なぜわざわざ学ぶのか.. 誰かにやってもらうだけです。私は 1.3.x から jquery を使用しており、すべてではなく多くのプラグインが肥大化しています。私が研究した多くのプラグインに対して同じソリューションを 1/4 のコード行で書きました。

そして、私が忘れる前に...一番上にスクロールする問題の簡単な解決策は、追加することです... return false; モーダルまたはポジショニングコードが実行されたら。

jquery - JQueryモーダルボックスポジショニング

7 に答える 7

Related

Reference