jQuery UIダイアログの配置

116

ホバーされたときにテキストの隣にダイアログを配置するために、jQueryダイアログUIライブラリを使用しようとしています。jQueryダイアログは、現在のビューポートの左上隅から測定された位置パラメーターを取ります（つまり、[0, 0]現在スクロールしている場所に関係なく、常にブラウザーウィンドウの左上隅に配置されます）。ただし、場所を取得するために知っている唯一の方法は、ページ全体に対する要素の方法です。

以下は私が現在持っているものです。 position.top1200などのように計算され、ページの残りのコンテンツの下にダイアログが配置されます。

$(".mytext").mouseover(function() {
    position = $(this).position();
    $("#dialog").dialog('option', 'position', [position.top, position.left]);
}

正しい位置を見つけるにはどうすればよいですか？

ありがとう！

jquery  jquery-ui 
— Wickethewok
ソース
2
バージョン1.9以降、ネイティブツールチップウィジェットがあります。
— theblang 2013

回答:

13

ダイアログの他の実装については、jQueryプラグインのいくつかを確認してください。 Cluetipは、機能豊富なツールチップ/ダイアログスタイルのプラグインのようです。4番目のデモは、あなたがやろうとしていることと同じように聞こえます（ただし、あなたが探している正確な配置オプションはないようですが）。

— ベン・ケーラー
ソース
リンク切れ。このプラグインはもうメンテナンスされていません。おそらく別の答えを選択するのが賢明でしょうか？
— JohnK
109

別の方法として、あなたが使用できるjQueryのUI Positionユーティリティなどを

$(".mytext").mouseover(function() {
    var target = $(this);
    $("#dialog").dialog("widget").position({
       my: 'left',
       at: 'right',
       of: target
    });
}
— ブライアン・M・ハント
ソース
29
これが最良のアプローチです。私はあなたが初めてのためのダイアログを作成している場合、あなたは余分に呼び出し必要があること、けれども注意しますdialog。このような$('#dialog').dialog({ width: 300 /* insert your options */ }).dialog('widget').position({ my: 'left', at: 'right', of: $(this) });
— wsanville
26
jQuery UI位置ユーティリティは非表示要素では機能しないため、このコードでダイアログを配置する前にダイアログを開く必要があります。
— Toadmyster
1
そのためにはjQuery UIが最適です。スコット・ゴンサレスは、 jQueryのUIがどのように動作するかの詳細な説明があり、その使用方法
— strangeloops
私はそれが混乱していることにat: 'top+50'at: 'top + 50'
— Lamy
複数のポジションを設定する方法に苦労している人（今のように）は、次のようになります $('dialog').dialog({ position: { my: 'left top', at: 'left+50 top+50'}, });
— 。– milpool
81

上記のいくつかの回答のおかげで、私は実験を行った結果、モーダルダイアログの定義の「position」属性を編集するだけでよいことがわかりました。

position:['middle',20],

JQueryは、水平方向の「X」値の「中央」テキストに問題がなく、ダイアログは中央から20px下方にポップアップしました。

私はJQueryを心に留めています。

— user1288395
ソース
追加のプラグインなしで動作し、直感的です。私が見た中で最高の解決策。
— PlanetUnknown 2013
追加のプラグインなしで、素晴らしくシンプルなソリューション。これは受け入れられる答えになるはずです。
— kamui 2013
13
ダーン、それはいいですが、非推奨です-「注：文字列および配列形式は非推奨です。」api.jqueryui.com/dialog/#option-position したがって、my / at / ofの位置オブジェクトを使用する必要があります。「jQuery UI Position」に関するリンクを参照してください。位置：{my： "center top"、at： "center top + 20"、of：window}のようなものを希望どおりに動作させることができます。その他の例については、リンクを参照してください。
— mikato 2013年
@mikato ... jquery ui 1.10によれば、positionは文字列と配列を受け入れます。... ...しかし、私はまだオブジェクト表記が好きです（私はキーが好きです）。
— dsdsdsdsd 2013
3
ダイアログポップアップを配置するためだけに多くのコードが必要だとは信じられません。
— Gi1ber7
42

すべての返信を読んだ後、これは最終的に私のために働きました：

$(".mytext").mouseover(function() {
    var x = jQuery(this).position().left + jQuery(this).outerWidth();
    var y = jQuery(this).position().top - jQuery(document).scrollTop();
    jQuery("#dialog").dialog('option', 'position', [x,y]);
});
— ジェイミン・パテル
ソース
この答えは私にとってはうまくいき、おそらく他のソリューションのセットアップ方法を何分/何時間もググるのに役立ちました。ありがとうございました！
— ネイサン
1
+1 .position（）が相対位置を、.offset（）が絶対位置（私が必要とするもの）を与えることを理解したとき、それは
— 非常に役に立ちました
16

Jayminの例をさらに一歩踏み込んで、jQuery ui-dialog要素をクリックした要素の上に配置するためにこれを思いつきました（「吹き出し」を考えてください）。

$('#myDialog').dialog( 'open' );
var myDialogX = $(this).position().left - $(this).outerWidth();
var myDialogY = $(this).position().top - ( $(document).scrollTop() + $('.ui-dialog').outerHeight() );
$('#myDialog').dialog( 'option', 'position', [myDialogX, myDialogY] );

相対的な幅と高さのオフセットを計算する前に、ui-dialog要素を「開いている」ことに注意してください。これは、jQueryがページに物理的に表示されているui-dialog要素なしでouterWidth（）またはouterHeight（）を評価できないためです。

ダイアログオプションで 'modal'をfalseに設定してください。そうすればOKです。

— マークアップ
ソース
1
私はあなたの2つの変数があることを意味し考えるmyDialogXとmyDialogY
— ケーシー
16

http://docs.jquery.com/UI/API/1.8/Dialog

左上隅の固定ダイアログの例：

$("#dialogId").dialog({
    autoOpen: false,
    modal: false,
    draggable: false,
    height: "auto",
    width: "auto",
    resizable: false,
    position: [0,28],
    create: function (event) { $(event.target).parent().css('position', 'fixed');},
    open: function() {
        //$('#object').load...
    }
});

$("#dialogOpener").click(function() {
    $("#dialogId").dialog("open");
});
— Xhochn
ソース
私にとって、これは従うのが最も簡単で、ただの属性であり、あなたは解決策を得ます。この「角かっこ」構文で「位置」が高さや幅などと一緒に示されることを知りませんでした。
— user734028
私には手がかりがありません、あまりにも前に：D
— xhochn '30 / 10/30
15

あなたのチェック <!DOCTYPE html>

<!DOCTYPE html>HTMLファイルの上部から見逃した場合、位置を指定しても、ダイアログはウィンドウ内ではなくドキュメントコンテンツの中央に表示されます：{my： 'center'、at： 'center' 、of：window}

EG：http : //jsfiddle.net/npbx4561/-実行ウィンドウからコンテンツをコピーし、DocTypeを削除します。HTMLとして保存して実行し、問題を確認します。

— ダニエル・フリッパンス
ソース
2
これはまさに私が抱えていた問題であり、これによって修正されました。
— BobRodes
1
私のxmlトランスフォームはdoctypeを追加できませんでした。この回答と一緒に：stackoverflow.com/questions/3387127/set-html5-doctype-with-xsltがうまくいきました。
— Daniel Bower
1
この素晴らしい答えに1票以上賛成してほしい。それは私が何時間も苦労していた私の問題を修正しました。
— DS博士
10

それをコントロールの上に置くには、次のコードを使用できます。

    $("#dialog-edit").dialog({
...    
        position: { 
            my: 'top',
            at: 'top',
            of: $('#myControl')
        },

...
    });
— ライブラブ
ソース
7 
$(".mytext").mouseover(function() {
   var width = 250;
   var height = 270;
   var posX = $(this).offset().left - $(document).scrollLeft() - width + $(this).outerWidth();
   var posY = $(this).offset().top - $(document).scrollTop() + $(this).outerHeight();
   $("#dialog").dialog({width:width, height:height ,position:[posX, posY]});
}

要素のすぐ下にダイアログを配置します。ブラウザの左上隅からの相対位置を計算するからといって、offset（）関数を使用しましたが、position（）関数は、要素の親である親divまたはiframeに対する相対位置を計算します。

— M.ベレン
ソース
6

純粋なjqueryを実行する代わりに、次のようにします。

$(".mytext").mouseover(function() {
    x= $(this).position().left - document.scrollLeft
    y= $(this).position().top - document.scrollTop
    $("#dialog").dialog('option', 'position', [y, x]);
}

私があなたの質問を正しく理解している場合、あなたが持っているコードは、ページにスクロールがないかのようにダイアログを配置していますが、スクロールを考慮に入れたいです。私のコードはそれをするべきです。

— サミュエル
ソース
何らかの理由で、document.scrollleftは未定義です。
— Wickethewok 2009
2
私の悪い、そのscrollLeft scrollTopが大文字にするのを忘れた
— Samuel
var x = el.position（）。left + el.outerWidth（）; var y = el.position（）。top-$（document）.scrollTop（）; 私のために働いた。問題は、ダイアログの情報を変更した後、ダイアログの高さと幅を取得できないことです。
— rball
4

このページでは、スクロールオフセットを決定する方法を示します。jQueryにも同様の機能があるかもしれませんが、見つかりませんでした。ページに表示されているgetScrollXY関数を使用すると、.position（）の結果からx座標とy座標を減算できるはずです。

— フィリップ・ティニー
ソース
4

少し遅れますが、$ j（object）.offset（）。leftと.topを適宜使用することで、これを実行できます。

— user363690
ソース
4

ふきだしがまあまあだとは思いません。少し調整して、機能し、アイテムがリンクのすぐ下に表示されるようにしました。

function PositionDialog(link) {
    $('#myDialog').dialog('open');
    var myDialogX = $(link).position().left;
    var myDialogY = $(link).position().top + $(link).outerHeight();
    $('#myDialog').dialog('option', 'position', [myDialogX, myDialogY]);
}
— 崖
ソース
3

中心位置を修正するには、次を使用します：

open : function() {
    var t = $(this).parent(), w = window;
    t.offset({
        top: (w.height() / 2) - (t.height() / 2),
        left: (w.width() / 2) - (t.width() / 2)
    });
}
— エドゥアルドクオモ
ソース
3

ここにコードがあります。jQueryUIダイアログを中央に配置する方法......

var $about = $("#about");

   $("#about_button").click(function() {
      $about.dialog({
         modal: true,
         title: "About the calendar",
         width: 600,         
         close: function() {
            $about.dialog("destroy");
            $about.hide();
         },
         buttons: {
            close : function() {
               $about.dialog("close");
            }
         }
      }).show();

      $about.dialog("option", "position", 'center');

   });
— マヌーRS
ソース
3 
$("#myid").dialog({height:"auto",
        width:"auto",
        show: {effect: 'fade', speed: 1000},
        hide: {effect: 'fade', speed: 1000},
        open: function( event, ui ) {
          $("#myid").closest("div[role='dialog']").css({top:100,left:100});              
         }
    });
— ギュネス・エルデミ
ソース
2

私は提案されたすべての解決策を試しましたが、ダイアログはメインドキュメントの一部ではなく、独自のレイヤーを持っているため、それらは機能しません（ただし、これは私の推測によるものです）。

  1. でダイアログを初期化する $("#dialog").dialog("option", "position", 'top')
  2. で開く $(dialog).dialog("open");

  3. 次に、表示されたダイアログのxとyを取得します（ドキュメントの他のノードではありません！）

    var xcoord = $(dialog).position().left + ADD_MODIFIER_FOR_X_HERE;

    var ycoord= $(dialog).position().top + ADD_MODIFIER_FOR_Y_HERE;

    $(dialog).dialog('option', 'position', [xcoord , ycoord]);

このように、座標はドキュメントからではなくダイアログからのものであり、位置はダイアログのレイヤーに従って変更されます。

— 山さん
ソース
1

ダイアログをページの中央に配置するために多くの方法を試してみたところ、コードが次のようになりました。

$("#dialog").dialog("option", "position", 'top')

これが作成されたときにダイアログの位置を変更しないでください。

代わりに、セレクターレベルを変更してダイアログ全体を取得します。

$("#dialog").parent() <-これは、dialog（）関数がDOMで作成する親オブジェクトです。これは、セレクター$（ "＃dialog"）が属性top、leftを適用しないためです。

ダイアログを中央に配置するには、jQuery-Client-Centering-Pluginを使用します

$（ "＃dialog"）。parent（）。centerInClient（）;

— jmozko
ソース
1

上記の解決策は非常に当てはまります...しかし、ウィンドウのサイズが変更された後、UIダイアログは位置を保持しません。以下のコードはこれを行います

            $(document).ready(function(){

                $(".test").click(function(){
                            var posX = $(".test").offset().left - $(document).scrollLeft() + $(".test").outerWidth();
                            var posY = $(".test").offset().top - $(document).scrollTop() + $(".test").outerHeight();
                            console.log("in click function");
                            $(".abc").dialog({
                                position:[posX,posY]
                            });

                        })

            })

            $(window).resize(function(){
                var posX=$(".test").offset().left - $(document).scrollLeft() + $(".test").outerWidth();
                var posY = $(".test").offset().top - $(document).scrollTop() + $(".test").outerHeight();

            $(".abc").dialog({
                                position:[posX,posY]
                            });
            })
— カウストゥブ-KAY
ソース
0

あなたは中央に表示するためにスタイルのトップポジションを設定することができます、コードを見た：

.ui-dialog {top：100px！important;}

このスタイルでは、上から100px下のダイアログボックスが表示されます。

— サンジェイ・ジャンギッド
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.