2

現在、多数のオプションが定義されたダイアログがあります。ユーザーがボタンをクリックすると表示されます。私のダイアログは次のように定義されています：

    $('#newIssueDialog').dialog({
        autoOpen: false,
        modal: true,
        closeOnEscape: true,
        draggable: false,
        resizable: false,
        width: 415,
        height: 175,
        position: {my: "top", at: "bottom", of: "#btnNewIssue"}
    });

これにより、ボタンの下の中央にダイアログが表示されます。
私が実際にやりたいのは、ボタンの下にあるダイアログをポップすることですが、ウィンドウの中央に配置します。

それを行う方法について何かアイデアはありますか？

編集：また、ドキュメントに対するウィンドウの位置を考慮することは可能ですか？のように、ページにスクロールバーがあり、ユーザーがページを垂直または水平にスクロールした場合、ボタンの位置とページ上の位置を計算して、ボタンがボタンの下にあり、中央に配置されるようにすることはできますか？

4

2 に答える 2

1

を使用する代わりに、次のようmy, at, ofに自分で位置を計算できます。lefttop

$("#btnNewIssue").on("click", function() {
    var $button = $(this);
    var $dialog = $('#newIssueDialog');

    //var top = $button.position().top + $button.height() + ($button.outerHeight() / 2);
    var top = $button.position().top + $button.height() + (($button.outerHeight(true) - $button.height()));
    var left = ($(document).width() - ($dialog.outerWidth / 2)) / 2

    $dialog.dialog({
        autoOpen: true,
        modal: true,
        closeOnEscape: true,
        draggable: false,
        resizable: false,
        width: 415,
        height: 175,
        position: [left, top]
    });
});​

例として基本的なHTMLを使用する：

<div id="newIssueDialog"> My modal dialog</div>
<button id="btnNewIssue">Click Me</button>

</ p>

デモ-ボタンの下にダイアログを配置しますが、ウィンドウ/ドキュメントの中央に配置します

上記の例で使用documentしていますが、必要に応じて代わりにウィンドウを使用できます。違いはほとんどないはずです。

編集

ボタンの境界線の高さ、パディング、マージンが正しく含まれていなかった見落としを修正しました。

ボタンにが指定されている場合に備えて、heightfromouterHeight(true)とボタンの控除を追加せずにフィドルを保存しました。borderspaddingmargins

これ： 

var top = $button.position().top + $button.height() + ($button.outerHeight() / 2);

これである必要があります：

var top = $button.position().top + $button.height() + (($button.outerHeight(true) - $button.height()));

デモも更新されました。

編集

ただし、ページにスクロールバーが表示されている場合は、問題が発生しています。

垂直スクロール位置のscrollTop()場合は、次のように最後の現在の値を差し引くだけです。

var top = $button.position().top + $button.height() + ($button.outerHeight(true) - $button.height()) - $(window).scrollTop();

モーダルを水平方向の中央に配置するために、何も変更する必要はありません。上記の計算コードはleft常に機能しているようです。ただし、特定のマークアップで問題が発生する場合は、scrollLeft（）を確認してください。これは、次のように差し引く必要があるという点で同じように機能すると思います。

var left = (($(document).width() - ($dialog.outerWidth / 2)) / 2) - $(window).scrollLeft();

またはおそらく

var left = ($(window).scrollLeft() - $(document).width() - ($dialog.outerWidth / 2)) / 2;

すでに述べたように、以下のデモはそれを必要としませんが、必要な場合は、それを動かして、どのように収まるかを確認してください。

ボタンが画面の下部に近い場合、モーダルは画面外に表示できないためボタンの下には表示されませんが、代わりにダイアログの下部が画面の下部に揃えられることに注意してください。これは予想される動作です。ただし、ボタンの下に十分なスペースがある場合、ダイアログはボタンのすぐ下で常に期待どおりに表示されます。

デモ-ウィンドウのスクロール位置を含む
（ボタンに到達するには下にスクロールする必要があり、正しくテストするには右にスクロールすることもできます）

于 2013-01-02T21:57:36.497 に答える
0

私が思いつくことができる最善のことは、ダイアログを開くときにX/Y座標を自分で指定する必要があるということです。

$("#btnNewIssue").button().click(function(){
    var x = ($(window).width() - 415) / 2;
    var y = $(this).offset().top + $(this).height();
    $("#newIssueDialog").dialog("option", "position", [x,y]).dialog("open");
});​

デモJSFiddle

于 2013-01-02T21:57:19.240 に答える