モーダルウインドウで隠れないコンテンツがあるバグのコード

 サイドバーのあるウェブページでメインブロックから全面のモーダルウインドウを開いたらサイドバーのコンテンツの一部が隠れなかった問題を再現するためのコード。

メインブロックに z-index:0 があることで、メインウインドウとは親が異なるサイドバーは重なった場合にメインウインドウの上面に表示してしまう。 モーダルウインドウはメインウインドウ内にあるため、z-indexの値を大きくしてもメインウインドウ内で最上面に表示されるだけで、その後にサイドバーを描画したらサイドバーの方が上面になる。htmlのコードでサイドバーの方を先に記述していれば、サイドバーの後にメインウインドウを表示するので、重なった場合もメインウインドウの方が上面になり、モーダルウインドウは最上面になる。

モーダルウインドウをメインウインドウの外に出せば、 z-indexの値が効果を持つようになり、最上面に表示させることができる。

<!DOCTYPE html>
<html lang="ja">
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure Original Code</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
    #main{
      z-index:0; /* メインのウィンドウ。.sub-inよりも小さくしない */
      position: relative; /* z-indexを有効にするため */
      border: 3px dashed #000;
      padding: 10px;
      text-align: center;
    }
    .demo-modal{
      z-index:1000; /* モーダルで開くウィンドウ */
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 1.0);
      display: flex;
      justify-content: center;
      align-items: center;
    }
    /* #sub{z-index:auto;} */
    .sub-in{
      /* z-index:auto; サブウインドウの中身。#mainより小さくすれば隠れる。 */
      position: relative; /* fixed,sticky,relative,absoluteで異常。staticで異常なし */
      bottom: 20px;
      right: 20px;
      background-color: #007bff;
      color: white;
      padding: 40px 60px;
    }

    .modal-content {
      background-color: white;
      padding: 20px;
      border-radius: 5px;
      text-align: center;
      position: relative;
    }
    .modal-close {
      position: absolute;
      top: 5px;
      right: 10px;
      font-size: 20px;
      cursor: pointer;
    }
</style>

</head>
<body>

<div>
    <div id="main">
        <div>
            <button id="modal-on">
                モーダルウインドウ表示
            </button>
        </div>
        <div class="demo-modal">
            <div class="modal-content">
                <span class="modal-close demo-close">&times;</span>
                <p>モーダルウィンドウです</p>
            </div>
        </div>
    </div>
    <div id="sub">
        <a class="sub-in">サブウインドウの中身</a>
    </div>    
</div>

<<script>
    jQuery(document).ready(function($){
        // ページロード時にモーダルウィンドウを非表示にする
        jQuery('.demo-modal').hide();

        // モーダル表示ボタンのクリックイベント
        jQuery(document).on('click', '#modal-on', function(e){
            e.preventDefault(); // デフォルトのリンク動作をキャンセル
            jQuery('.demo-modal').fadeIn();
        });

        // モーダルを閉じるボタンのクリックイベント
        jQuery('.demo-close').on('click', function(){
        jQuery('.demo-modal').fadeOut();
            return false;
        });

        // モーダル外をクリックで閉じる機能
        jQuery('.demo-modal').on('click', function(e) {
            if (e.target === this) {
            jQuery('.demo-modal').fadeOut();
            }
        });
    });
</script>

</body>
</html>
 

コメント