質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.61%

  • PHP

    19872questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • jQuery

    6542questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    5590questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • Ajax

    1067questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

  • jQuery UI

    156questions

    jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 8,853

toitoitoi

score 15

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

現在ショッピングサイトでお気に入り機能を作成中です。
「お気に入り」ボタンをクリックした際にダイアログを表示させたいのですが、
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] が効かないのでしょうか…。
お知恵を拝借させてください。
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

回答 3

checkベストアンサー

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/06/04 15:23

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

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

    キャンセル

  • 2015/06/04 15:29

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

    キャンセル

  • 2015/06/04 15:38

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

    キャンセル

  • 2015/06/04 16:09

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

    キャンセル

  • 2015/06/04 16:39

    何度もありがとうございます!
    今、うまくいきました♪
    「!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さんをベストアンサーに選ばせていただきます^^

    キャンセル

0

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/06/04 15:15

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

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

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

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

    キャンセル

  • 2015/06/04 16:40

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

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

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

    キャンセル

  • 2015/06/04 16:54

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

    キャンセル

0

まず、画面の幅と高さを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

参考にどうぞ。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/06/04 15:44

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.61%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • PHP

    19872questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • jQuery

    6542questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    5590questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • Ajax

    1067questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

  • jQuery UI

    156questions

    jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。