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

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

ただいまの
回答率

89.72%

モーダルウィンドウを重ねて表示

受付中

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 9,221

NameLess9068

score 10

jqueryに関する質問です。
以下のコードを用いて表示されたモーダルウィンドウ1の上に重ねて別のモーダルウィンドウ2を表示させたいです。
以下のコードのIDとClass名だけを変更してモーダルウィンドウ2を作成しました。
しかし、モーダルウィンドウ2が表示されるとモーダルウィンドウ1が消えてしまいます。
「.modal-overlay」あるいは「.modal-close」をクリックというコメント付近のコードを削除すると、問題は解決しますが、当然モーダルを閉じることができなくなってしまいます。
どうすればこの問題を解決できるか教えてください。

$(function() {
    // 「#modal-open」をクリック
    $('.modal-open').click(function() {
        // オーバーレイ用の要素を追加
        $('body').append('<div class="modal-overlay"></div>');
        // オーバーレイをフェードイン
        $('.modal-overlay').fadeIn('slow');

        // モーダルコンテンツのIDを取得
        var modal = '#' + $(this).attr('data-target');
        // モーダルコンテンツの表示位置を設定
        modalResize();
        // モーダルコンテンツフェードイン
        $(modal).fadeIn('slow');

        // 「.modal-overlay」あるいは「.modal-close」をクリック
        $('.modal-overlay, #modal-close').off().click(function() {
            // モーダルコンテンツとオーバーレイをフェードアウト
            $(modal).fadeOut('slow');
            $('.modal-overlay').fadeOut('slow', function() {
                // オーバーレイを削除
                $('.modal-overlay').remove();
            });
        });

        // リサイズしたら表示位置を再取得
        $(window).on('resize', function() {
            modalResize();
        });

        // モーダルコンテンツの表示位置を設定する関数
        function modalResize() {
            // ウィンドウの横幅、高さを取得
            var w = $(window).width();
            var h = $(window).height();

            // モーダルコンテンツの表示位置を取得
            var x = (w - $(modal).outerWidth(true)) / 2;
            var y = (h - $(modal).outerHeight(true)) / 2;

            // モーダルコンテンツの表示位置を設定
            $(modal).css({
                'left' : x + 'px',
                'top' : y + 'px'
            });
        }

    });
});
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • sk_3122

    2016/11/18 17:10

    モーダルダイアログの中から さらにモーダルダイアログを呼ぶ感じでしょうか? jQuery 部分だけじゃなくて html 部分の動くソースもあると試しやすいのですが。 class="modal-open" を指定したトリガ、と data-target="モーダルとして表示するべき要素のID"、ですかね…?

    キャンセル

  • sk_3122

    2016/11/18 17:16

    ああ、CSSもないと駄目ですかね。要は、動くソースがあれば 実際に試してみて おかしいところを指摘しやすいということです。ソースだけ見て机上デバッグするよりその方が楽なので、回答も付きやすいかと思います。

    キャンセル

回答 2

+2

とりあえず明らかに「ああ動かないだろうな」というところだけ。
「ダイアログA」から「ダイアログB」を呼び出す、

重なりとしては最終的に以下のようになる想定。

z-index 大

|「ダイアログB」
|「ダイアログB用のオーバーレイ」
|「ダイアログA」
|「ダイアログA用のオーバーレイ」
|「body」

z-index 小

// オーバーレイ用の要素を追加
$('body').append('<div class="modal-overlay"></div>');

// オーバーレイをフェードイン
$('.modal-overlay').fadeIn('slow');

// オーバーレイ用の要素を追加
//★一旦変数に取る
var $overlay = $('<div class="modal-overlay"></div>');
$('body').append($overlay);

// オーバーレイをフェードイン
//★ .modal-overlay だと、このclassが指定されている要素がすべて対象になる
//   = ダイアログA用のオーバーレイもダイアログB用のオーバーレイも対象になってしまう
//   変数で指定すれば、上で生成したオーバーレイだけが対象になる
$overlay.fadeIn('slow');

// ★以降も .modal-overlay で指定している箇所は変数 $overlay に差し替える


とかですかね。

あとはオーバーレイを重ねるなら z-index の指定をどうするか とかですかね
「ダイアログA」の上に「ダイアログB」を重ねるなら、
「ダイアログB用のオーバーレイ」は「ダイアログA」の上に重ならないと駄目ですよね

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

+1

モーダルの考え方は、親ウィンドウより優先的に処理される子ウィンドウですから
モーダルを開いている間は親ウィンドウを操作できないので
別のモーダルを開くということは理論的にありえないのでは?
アラートが出ている最中に別のアラートがだせないのと同じです

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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