web-dev-qa-db-ja.com

jquery uiダイアログの位置を修正

ページがスクロールしても位置を固定して維持するためにダイアログが必要だったため、 http://forum.jquery.com/topic/dialog-position-fixed-12-1-201 で拡張機能を使用しました=しかし、それには2つの問題があります。

  • IEでちらつき、Firefoxでページをスクロールする（Safari/Chromeでは問題ありません）

  • 閉じてから再び開くと、その粘着性が失われ、ページに沿ってスクロールします。

以下は、ダイアログの作成に使用しているコードです。

$('<div id="'+divpm_id+'"><div id="inner_'+divpm_id+'"></div><textarea class="msgTxt" id="txt'+divpm_id+'" rows="2"></textarea></div>')
                .dialog({
                autoOpen: true,
                title: user_str,
                height: 200,
                stack: true,
                sticky: true //uses ui dialog extension to keep it fixed
     });

そして、これを再開するために使用しているコードは次のとおりです。

jQuery('#'+divpm_id).parent().css('display','block');

提案/解決策？

ありがとう

jquery-uicssjquery-ui-dialog
37
Sofia

ここに投稿されたソリューションのいくつかを試しましたが、ダイアログが開かれる前にページがスクロールされた場合は機能しません。問題は、スクロール位置を考慮せずに位置を計算することです。なぜなら、この計算中は位置が絶対的だからです。

私が見つけた解決策は、ダイアログを開く前に、ダイアログの親のCSSを固定に設定することでした。

$('#my-dialog').parent().css({position:"fixed"}).end().dialog('open');

これは、autoOpenをfalseに設定してダイアログをすでに初期化していることを前提としています。

ダイアログがサイズ変更可能な場合、これは機能しません。位置を固定したままにするには、サイズ変更を無効にして初期化する必要があります。

$('#my-dialog').dialog({ autoOpen: false, resizable: false });

これを徹底的にテストし、これまでにバグを発見していません。

42
Scott Greenfield

次のコードにいくつかの推奨ソリューションを組み合わせました。スクロール、移動、サイズ変更は、Chrome、FF、IE9でうまく機能します。

$(dlg).dialog({
    create: function(event, ui) {
        $(event.target).parent().css('position', 'fixed');
    },
    resizeStop: function(event, ui) {
        var position = [(Math.floor(ui.position.left) - $(window).scrollLeft()),
                         (Math.floor(ui.position.top) - $(window).scrollTop())];
        $(event.target).parent().css('position', 'fixed');
        $(dlg).dialog('option','position',position);
    }
});

更新：

すべてのダイアログでデフォルトにしたい場合：

$.ui.dialog.prototype._oldinit = $.ui.dialog.prototype._init;
$.ui.dialog.prototype._init = function() {
    $(this.element).parent().css('position', 'fixed');
    $(this.element).dialog("option",{
        resizeStop: function(event,ui) {
            var position = [(Math.floor(ui.position.left) - $(window).scrollLeft()),
                            (Math.floor(ui.position.top) - $(window).scrollTop())];
            $(event.target).parent().css('position', 'fixed');
            // $(event.target).parent().dialog('option','position',position);
            // removed parent() according to hai's comment (I didn't test it)
            $(event.target).dialog('option','position',position);
            return true;
        }
    });
    this._oldinit();
};
31
msander

JQuery UI 1.9.1で動作するようにScottの答えを得ることができませんでした。私の解決策は、openイベントからのコールバックでダイアログを再配置することです。最初にcssの位置を固定に設定します。次に、ダイアログを希望する場所に配置します。

$('selector').dialog({
    autoOpen: false,
    open: function(event, ui) {
        $(event.target).dialog('widget')
            .css({ position: 'fixed' })
            .position({ my: 'center', at: 'center', of: window });
    },
    resizable: false
});

注：別の回答で述べたように、ダイアログのサイズを変更するとその位置が再びabsoluteに設定されるため、resizableを無効にしました。

9
Dag Høidahl

上記の Langdon's コメントに基づいて、以下を試してみました。これはjQuery-UI 1.10.0およびサイズ変更可能なダイアログで正常に動作します。

$('#metadata').dialog(
{
    create: function (event) {
    $(event.target).parent().css('position', 'fixed'); 
    },
    resizeStart: function (event) {
    $(event.target).parent().css('position', 'fixed'); 
    },
    resizeStop: function (event) {
    $(event.target).parent().css('position', 'fixed'); 
    }
});
7
wolfmanx

試してください：

$(document).ready(function() {
  $('#myDialog').dialog({dialogClass: "flora"});
  $('.flora.ui-dialog').css({position:"fixed"});
)};

（ http://dev.jqueryui.com/ticket/2848 から）

4
kingjeffrey

ダイアログボックスの位置を強制的にposition:fixed CSSを使用

$('.selector').dialog({ dialogClass: 'myPosition' });

myPosition cssクラスを次のように定義します。

.myPosition {
    position: fixed;
}
2
Эџad Дьdulяңмaи
$("#myDilog").dialog({
    create:function(){
        $(this).parent().css({position:"fixed"});
    }
});
1
Blueming
$('#'+tweetidstack.pop()).dialog("open").parent().css({position:"fixed"});

なぜ$（document）.readyを使用するのですか？これは最近の開発かもしれませんが、現在は正常に機能しています。

0
heorling
 $('#myDialog').dialog({ dialogClass: "flora" });
        $('.flora.ui-dialog').css({ top: "8px" });

これにより、クリックしたかどうかに関係なく、ダイアログが最上位に保持されます。

0
coolguy97

ブログに書いたように https://xbrowser.altervista.org/informatica-portata/jquery-easyui-bug-fix-window-dialog-position-widget/ でバグを見つけました「window」要素または「dialog」要素。このウィジェットをインスタンス化すると、特に上部と左の位置（サイズをドラッグまたは変更した場合）で、メインウィンドウブラウザーから消えます。この問題を解決するために、このソリューションを実装しました。

以下のソースコードを読むことができます：

_$(dialog).window({
   onMove: function(left, top) {
   if (left < 0 || top < 0) {
     left = (left < 0) ? 0 : left;
     top = (top < 0) ? 0 : top;
     $(this).window('move', {left: left, top: top});
   }
},
onResize: function(width, height) {
  var opt = $(this).window("options");
  var top = opt.top;
  var left = opt.left;
  if (top < 0) {
    top = (top < 0) ? 0 : top;
    $(this).window('move', {left: left, top: top});
  }
}
}).window("open");

The same code is for dialog:

$(dialog).dialog({
  onMove: function(left, top) {
  if (left < 0 || top < 0) {
     left = (left < 0) ? 0 : left;
     top = (top < 0) ? 0 : top;
     $(this).dialog('move', {left: left, top: top});
  }
},
onResize: function(width, height) {
   var opt = $(this).window("options");
   var top = opt.top;
   var left = opt.left;
   if (top < 0) {
     top = (top < 0) ? 0 : top;
     $(this).dialog('move', {left: left, top: top});
   }
}
}).dialog("open");
_

さらに、「onResize」メソッド内で「$(this).window(“options”);」を呼び出してアプリを起動しても、ウィンドウは表示されません。そのため、ダイアログの宣言で「.window（“ open”）;」を挿入する必要があります。

私はあなたを助けることを望みます。

0
Enrico

ソリューションは実際には非常に簡単です。質問されたときにこれが当てはまるかどうかはわかりませんが、とにかく今は当てはまります。

//First a container/parent-div with fixed position is needed
var dialogContainer=document.body.appendChild(document.createElement("div"));
dialogContainer.style.position="fixed";
dialogContainer.style.top=dialogContainer.style.left="50%";//helps centering the window


//Now whenever a dialog is to be created do it something like this:
$(myDialogContent).dialog({
    appendTo: dialogContainer,
    position: { 
        at: 'center center',
        of: dialogContainer
    }
});

「appendTo」について： http://api.jqueryui.com/dialog/#option-appendTo
「位置」について： http://api.jqueryui.com/position/

0
Clox

上記の他の回答のいくつかと似ていますが、ダイアログを_position: fix_する以上のことを行う必要があることがわかりましたが、ダイアログにアタッチしたままにするためには_position: static_のコンテンツも必要でした。

_$('<div id="myDialog" class="myClass">myContent</div>')
        .dialog(dialogOptions)
        .parent()
        .css({ position: 'fixed' })
        .end()
        .position({ my: 'center', at: 'center', of: window })
        .css({ position: 'static' });
_

この後、いつでも.dialog('open')を呼び出すことができ、単にそれを置いた場所に表示されます。実際に、必要に応じて既存のダイアログを返すか、新しいダイアログを作成する関数にこれを用意し、.dialog('open')が呼び出される前にダイアログの値を変更します。

0
cjbarth

まず、ダイアログを作成します。このようなもの：

$("#dialog_id").dialog({
                autoOpen : false,
                modal : true,
                width: "auto",
                resizable: false,
                show: 'fade',
                hide: { effect:"drop",duration:400,direction:"up" },
                position: top,
                height: 'auto',
                title: "My awesome dialog",
                resizeStart: function(event, ui) {
                    positionDialog();
                },
                resizeStop: function(event, ui) {
                    positionDialog();
                }
            });
            $("#dialog_id").dialog('open');

次に、これを自動中心にします：

    function positionDialog (){
        setInterval(function(){
            if($("#dialog_id").dialog( "isOpen" )){
                $("#dialog_id").dialog('option','position',$("#dialog_id").dialog( "option", "position" ));
            }
        },500);
    }
//setInterval is for make it change position "smoothly"
//You can take it off and leave just the if clausule and its content inside the function positionDialog.
0
Hiro Ferreira
$( ".ui-dialog" ).css("position","fixed");  

$( ".ui-dialog" ).css("top","10px");

このコードをダイアログのオープン関数に配置します

0
mohammad inanloo