1

オンにしたいjQueryポップアップダイアログがあり、max-widthそれを中央に配置したい。divその内容にも同じものを再利用したいと思います。私の問題はwidth:auto、ダイアログを開くときに設定した場合、キックインするために行う必要があるため、オーバーフローを引き起こさないmax-widthテキストを最初にポップアップしてからポップアップすると、ダイアログが適切に中央に配置されないことです。するいくつかのテキスト：

http://jsfiddle.net/kxCuq/2/

ご覧のとおり、2回目のラウンドでは、ポップアップが水平方向の中央ではなく右に移動します。これを修正する方法はありますか？

4

3 に答える 3

1

コンテンツの幅を変更したら、jQueryが幅と中心を再計算できるように、コンテンツを破棄して再作成することをお勧めします。

また、このmaxWidthオプションは、ダイアログのサイズを変更できる最大幅をピクセル単位で指定します。したがって、このオプションは期待どおりに機能しません。コンテンツの最大幅を設定します。だから私たちは持っています：

#dialog {
    max-width: 200px;
    display: none;
}

$("#dialog").dialog({
    modal: true,
    draggable: false,
    width: "auto",
    close: function (event, ui) {
        $(this).dialog("destroy");
    }
});

jsFiddleのデモ

于 2013-03-02T11:09:54.073 に答える
1

なぜこれが難しい質問なのかわかりません。'ui-dialog'クラスのcss属性を設定することで、実際に簡単に実行できます。

何をすべきかは次のとおりです。

HTMLを設定したら、次のjqueryを追加します。

$('.ui-dialog').css('position','relative');

$('.ui-dialog').css('margin','10px auto');

たとえば400pxのように最大幅を固定したい場合は、これも追加できます。

$('.ui-dialog').css('max-width','400px');

両方のボックスをまったく同じにし、まったく同じにしたい場合（最初のポップアップと2番目のポップアップ）、これをcssに追加できます。

.ui-dialog{ position:relative; max-width:200px; margin:10px auto 10px auto; }

ライブデモリンクは次のとおりです。

ライブデモ

于 2013-03-03T06:50:25.693 に答える
0

width:auto犯人のようです。それを削除すると、すべてが適切に中央に配置されます。

幅を設定する必要がある場合は、コンテンツを変更するときに幅を変更するために使用できるセッターがあります。 $( ".selector" ).dialog( "option", "width", 500 );

于 2013-02-27T16:35:26.760 に答える