Go to Qiita Advent Calendar 2024 Top
LoginSignup
macha_7
@macha_7

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

microModal 複数重ねて開くとき、前後関係はどう制御する？

Q&A

Closed

JavaScriptTypeScript

解決したいこと

  • microModalの仕様、使い方
  • モーダルを重ねて表示させるとき、モーダルの前後関係はどう制御できるのか
  • 正確な仕様が分からない

ケース

前提

  1. 画面Xがあり、ボタンなどでフルモーダルAを開く
  2. フルモーダルA上からボタンなどでフルモーダルBを開く
  3. フルモーダルB上からフルモーダルCを開く ...

事象

ある時、フルモーダルCを開いた際、Bの上（最前面）でなくAの下（最背面）に表示されてしまい、操作できない状況になってしまった

求ム

申し訳ないのですが、業務上で発生した事象のため実際のソースを掲載できません。
また上記事象を自身で再現できずにいます。

関連する記事や情報がございましたら、ご提供いただけますと幸いです...

(追記)解決しました

@lhankor_mhy 様よりコメント頂き解決しました。

知識

  • microModal 自体にモーダルの前後関係（z-index）の制御を設定する仕様は無さそう
  • css の z-index プロパティは明示的に指定しなければ、DOMの生成順になる（正確にはauto）

解決方法

  • DOMの生成順を確認し、表示させたい順序で要素を生成させる
  • css の z-index プロパティで明示的に制御する

参照

microModalドキュメント

1

1Answer

lhankor_mhy
@lhankor_mhy

デモを見て来ましたが、そちらのスタイルではz-indexが指定されていないようでした。そうすると、何事もなければDOM出現順に重なると思うのですが、実際のコードではABCのDOM出現順はどうでしたか？

2Like

Comments

  1. @macha_7

    Questioner

    ご確認頂きありがとうございます。

    実は最背面になってしまうCは、HTML要素を裏で生成し、Ajaxで親画面Xの要素の一部と書き換える形となっていました。
    そのためDOM順にすると、下記のようになって今回の事象になる可能性がありそうです。

    X→A→B
    ↑C要素をXに差し込み

    いまいま確認出来ないため、後日結果ご報告させていただきますmm

  2. @macha_7

    Questioner

    @lhankor_mhy 様
    コメントありがとうございました。
    やはりDOM順だとこのようになっていました。

    X要素→A要素→B要素
↑C要素をXに差し込み

    Bモーダル生成時にCモーダルの基礎要素を生成するようにして無事解消いたしました。

    またz-indexについて知見がなかったため、この度コメント頂いて勉強になりました。
    ありがとうございました！

Your answer might help someone💌

LoginSign Up