42

ページがスクロールされてもダイアログの位置を固定する必要があったため、http://forum.jquery.com/topic/dialog-position-fixed-12-1-2010で拡張機能を使用しましたが、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');

提案/解決策はありますか?

ありがとう

4

15 に答える 15

45

ここに投稿されたいくつかの解決策を試しましたが、ダイアログが開かれる前にページがスクロールされた場合、それらは機能しません。問題は、この計算中は位置が絶対であるため、スクロール位置を考慮せずに位置を計算することです。

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

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

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

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

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

これを徹底的にテストしましたが、これまでのところバグは見つかりませんでした。

于 2011-06-28T00:20:13.137 に答える
33

次のコードにいくつかの提案された解決策を組み合わせました。スクロール、移動、およびサイズ変更は、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();
};
于 2012-02-11T18:18:47.227 に答える
10

jQuery UI 1.9.1で動作するスコットの答えを得ることができませんでした。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
});

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

于 2012-12-28T12:54:25.217 に答える
7

上記のLangdonsのコメントに基づいて、次のことを試しました。これは、jQuery-UI1.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'); 
    }
});
于 2013-03-02T20:13:02.860 に答える
4

試す：

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

( http://dev.jqueryui.com/ticket/2848から)

于 2010-06-18T22:52:11.270 に答える
2

ダイアログ ボックスの位置がposition:fixedCSS を使用するように強制する

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

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

.myPosition {
    position: fixed;
}
于 2012-07-07T21:31:57.297 に答える
1 
$("#myDilog").dialog({
    create:function(){
        $(this).parent().css({position:"fixed"});
    }
});
于 2015-08-26T09:36:15.483 に答える
0 
 $('#myDialog').dialog({ dialogClass: "flora" });
        $('.flora.ui-dialog').css({ top: "8px" });

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

于 2010-06-23T06:43:59.950 に答える
0 
$( ".ui-dialog" ).css("position","fixed");  

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

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

于 2013-05-04T08:52:39.777 に答える
0 
$('#'+tweetidstack.pop()).dialog("open").parent().css({position:"fixed"});

$(document).ready を使用する理由 これは最近の開発かもしれませんが、現在は問題なく動作しています。

于 2011-03-24T13:35:31.330 に答える
0

解決策は実際には非常に簡単です。質問がされたときにこれが適用されたかどうかはわかりませんが、とにかく今は適用されます。

//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/

于 2014-07-05T11:19:29.050 に答える