jquery ui ダイアログを中央に表示させたい

Question

初めて質問させていただきます。

現在ショッピングサイトでお気に入り機能を作成中です。
「お気に入り」ボタンをクリックした際にダイアログを表示させたいのですが、
PC、スマホともに画面中央に表示させることができなくて困っております。
今はなぜか画面の一番左下に表示されています。

概要は以下になります。

・ベースはPHP。
・「お気に入り」ボタンをクリックするとwishlist_ajax.jsへ飛ぶ。
・wishlist_ajax.js内で処理が成功した際に呼ばれる success:〜 にダイアログ表示のJSを記述している。

success:function(xml){
    // ダイアログを作成
    dialog_html = '<div id="dialog">◯◯は既にお気に入りに登録されています。</div>';
    $(dialog_html).dialog({
    	position: [300, 2700],  // 仮の数値です
        show: {
        	effect: 'drop',
        	direction: 'down'
        },
        hide: {
        	effect: 'drop',
        	direction: 'up'
        },
        modal: true,
        dialogClass: "no-close",
        buttons: {
        	"close": function() {
        		$( this ).dialog( "close" );
        	}
        }
    });
}

================

ヘッダーでは以下を呼んでいます。
jQuery UI のバージョンは 1.11.1 です。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script> <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smootheness/jquery-ui.css" rel="stylesheet" /> ================

スマホだとダイアログが後ろに隠れてしまうので下記を記述して全面に表示させています。

div.ui-dialog {
z-index: 99999;
}

なぜ position: [300, 2700] が効かないのでしょうか…。
お知恵を拝借させてください。

Comments

[takutok]

jQuery UIのバージョンはいくつですか？
positionで直接座標を指定することは出来ないような気がします。

[toitoitoi]

見て頂いてありがとうございます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smootheness/jquery-ui.css" rel="stylesheet" />
上記を呼んでいます。
バージョンによって使えないことがあるんですね。

Answer 1

まず、画面の幅と高さをjQueryで取得出来るはず。

なので、画面とボックスを割るイメージで「position: [300, 2700], 」の値を計算しよう。
これ最近のブラウザであればcssでも実装出来るからね。

例えば幅900pxの場合で、ボックスが300pxの場合の計算をすると、
900 / 2 - 300 / 2
(高さ / 2 - ボックスの幅 / 2)

これで中央のに配置出来る。
高さも同じ感じで計算すれば、丁度画面中央になります。

CSSでやる場合、こんな感じ

left: calc(100% / 2 - (100px / 2));

calc()関数はpxと%を混ぜて使う事が出来るので100%は画面いっぱいの意味なので、それを2割るだけ
http://fukumi.9en.co/wp/archives/241

参考にどうぞ。

Comments

[toitoitoi]

回答ありがとうございます。
left, topの正確な値を取得するJS関数は既に用意してあります。
それを使うと問題点が把握しづらくなりそうだったので仮の値を直接記述していました。
CSSの方がシンプルに書けそうなのでこちらも試してみます。

Answer 2

単純にCSSで書くのはどうでしょう？
#dialog{
position: fixed;
top: 50%;
left: 50%;
margin-top: -00px; /* ダイアログのheightの半分 /
margin-left: -00px; / ダイアログのwidthの半分 */
}

Comments

[toitoitoi]

回答ありがとうございます。

そのまま書いて試させていただきました。
確かに中央に出現しました！
ですが、直後に右端に移動しました・・・(´・ω・｀)
何かが悪さしてるのでしょうか。要調査ですね。

[Jiro]

おそらくですが、jQueryがスタイルを変更しているのかもしれませんね。
各スタイルに !important と追記してみてください。
top: 50% !important;
みたいに、、、

[toitoitoi]

上記の現象、余計なコードが入ったままで起こっていたものでした。
シンプルにJiroさんのコードを反映させたところ、なぜか左上に出現しました。
なぜでしょう。隠れている左ドロワーも含めて計算されているのかな。

[Jiro]

一度パソコン版ChromeなどでCSSを確認してみてください。どうなってますか？
デベロッパーツールで確認できます。
http://www.buildinsider.net/web/chromedevtools/01

[toitoitoi]

何度もありがとうございます！
今、うまくいきました♪
「!important」をセミコロンの外側に書いていたため効かなかったようです。（恥
その前は、「margin-top: -00px; 」という呪文があると思い込み、
そのまま記述していたためおかしな表示になっていたようです。（恥

現在は以下の記述でPC、スマホともにキレイに表示されています。
=====
position: fixed !important;
top: 50% !important;
left: 50% !important;
margin-top: -125px !important; /* ダイアログのheightの半分 */
margin-left: -150px !important; /* ダイアログのwidthの半分 */
=====

ダイアログの高さが若干可変なため、本当はjQueryで高さを自動取得したかったのですが、
そちらの方は未だにうまく動作しません。
しかし、可変といっても微小な値なのでひとまずはCSSに直書きでOKとします。

皆さん、お忙しい中お時間を割いていただきありがとうございました。
ソースをそのままいただいたのでJiroさんをベストアンサーに選ばせていただきます＾＾

Answer 3

以下のページによるとpositionの値にはObjectを入れるとなっています。
[300, 2700] が効かないのはそれが原因ではないでしょうか？
http://api.jqueryui.com/dialog/#option-position

positionはデフォルトの値が画面中央になっているようなので、
position: [300, 2700], を削除してみてはどうでしょうか？

Comments

[toitoitoi]

回答ありがとうございます。

デフォルトではうまくいきませんでした。(どのあたりに表示されたかは忘れてしまったのですが・・・）

Objectを入れるpositionの使い方の他に、座標を指定する方法があるようなのです。
どなたかのブログで拝見しました。できればそれを使いたかったのです。

ちなみにObjectを入れる方法ですと
=====
position: {
of : '#button_add_wishlist', // 基準とするセレクタ
at: 'center top', // 基準セレクタのどの位置に対象を合わせるか
my: 'center bottom' // 表示したい対象のどの部分を基準セレクタに合わせるか
},
=====
このように近くのボタンを基準に位置を指示することで理想に近い形にはなりました。
ただ、スマホではずれてしまうようです(T_T)

[ina]

画面中央に表示するなら、やはりデフォルトの値（{ my: "center", at: "center", of: window }）にするのが良いのではないかと思います。

中央表示の機能自体はjQuery UIに用意されていて、本来できるはずなので、一度Ajaxを経由せずに実行してみたり、他のCSSを外してみるなどして、うまくいかない原因を探られるのがよいかと思います。

参考にならないかもしれませんが、私が試したものを貼っておきます。
http://codepen.io/anon/pen/zGZLKz?editors=101

[toitoitoi]

inaさん、ありがとうございます。
確かに、なにも指定しなくても綺麗に中央に表示されますね。
それから codepen というサイトを初めて知りました。
とても便利そうですね！
「解決済」ではありますがまだjQueryに未練があるのでこれを使って原因を探っていこうと思います。