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

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

ただいまの
回答率

88.13%

モーダルウィンドウ表示中にハンバーガーメニューをクリックできないようにしたい

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 67

score 6

前提・実現したいこと

モーダルウィンドウの背景を押すとどこを押してもモーダルが閉じるようにしたいです。
現在、モーダル表示中に、なぜかハンバーガーメニューはクリック出来てしまいます。
モーダルとメニューが同時に出てくるということが起きています。

どうすれば解決できるのか…
ご指導お願い致します!!

どこまで記載すれば良いのか把握できておらず、コードが長くなってしまい申し訳ありません。

該当のソースコード

<div class="header-sp-right">
      <nav class="header-sp-nav">
        <ul class="header-sp-menu">
          <li class="header-sp-room header-sp-menu-list"><a href="">お部屋</a></li>
          <li class="header-sp-food header-sp-menu-list"><a href="">お料理</a></li>
          <li class="header-sp-spa header-sp-menu-list"><a href="">温泉</a></li>
        </ul>
        <div class="header-sp-booking">
          <a href="" class="js-modal-sp-open">
            <div class="header-sp-booking-inner">
              <img src="img/calender.png" alt="">
              <p>予約</p>
            </div>
          </a>
        </div>
      </nav>
      <div class="modal-sp js-modal-sp">
        <div class="modal-sp-bg js-modal-sp-close">
          <div class="modal-sp-contents">
            <div class="modal-sp-content-box">
              <select name="booking-menu">
                <option value="Cha-kaiseki"></option>
                <option value="stay"></option>
                <option value="family"></option>
              </select>
            </div>
            <a href="" class="js-modal-sp-close">閉じる</a>
          </div>
        </div>
      </div>
      <div class="ham">
        <span class="ham-line ham-line1"></span>
        <span class="ham-line ham-line2"></span>
        <span class="ham-line ham-line3"></span>
      </div>
    </div>
//style.scss

$sspc: 800px;
@import 'style.scss';

.header-sp-right {

    display: none;

    @include sspc {

      display: flex;
    }

    .header-sp-nav {
      margin-right: 2em;

      .header-sp-menu {

        display: none;

        @include sspc {
          width: 30%;
          height: 100vh;
          display: flex;
          flex-direction: column;
          background-color: rgba(0, 0, 0, 0.16);
          transition: 0.3s;
          position: fixed;
          z-index: 20;
          top: 7em;
          right: -40%;
        }

        &:first-child {
          padding-top: 20px;
        }

        .header-sp-menu-list {

          a {
            display: block;
            font-size: 21px;
            color: #FFFFFF;
            padding: 1em;
          }
        }
      }

      .header-sp-booking {

        a {
          display: block;

          .header-sp-booking-inner {
            width: 13em;
            height: 4.4em;
            background-color: #978F10;
            display: flex;
            align-items: center;
            justify-content: center;

            img {
              width: 2em;
              height: 2em;
              padding-right: 1em;
            }

            p {
              font-size: 1.6em;
              font-weight: bold;
              line-height: 3;
              color: #FFFFFF;
            }
          }
        }
      }
    }

    .header-sp-menu.open {
      right: 0;
    }

    .modal-sp {
      display: none;
      height: 100vh;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;

      .modal-sp-bg {
        background: rgba(0, 0, 0, 0.8);
        height: 100vh;
        position: absolute;
        width: 100%;

        .modal-sp-contents {
          background: #FFFFFF;
          padding: 1em;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 60%;

          .modal-sp-content-box {
            padding: 4em;
          }
        }
      }
    }

    .ham {
      display: none;
      width: 5em;
      height: 5em;
      cursor: pointer;
      position: relative;

      @include sspc {
        display: block;
      }

      .ham-line {
        position: absolute;
        left: 1em;
        width: 3em;
        height: 0.2em;
        background-color: #FFFFFF;
        transition: all 0.3s;
      }

      .ham-line1 {
        top: 0.7em;
      }

      .ham-line1.open {
        transform: rotate(45deg);
        top: 2em;
      }

      .ham-line2 {
        top: 1.9em;
      }

      .ham-line2.open {
        width: 0;
      }

      .ham-line3 {
        top: 3.2em;
      }

      .ham-line3.open {
        transform: rotate(-45deg);
        top: 2em;
      }
    }
  }
$(function () {

  //ハンバーガーメニュー開閉
  $('.ham').on('click', function () {
    $('.header-sp-menu, .ham, .ham-line1, .ham-line2, .ham-line3').toggleClass('open');
  });

  //ハンバーガーメニューのナビリンククリック後自動で閉じる
  $('.header-sp-menu-list a').on('click', function () {
    $('.ham').click();
  });

  //スクロールしたらヘッダーが変わる
  window.addEventListener('scroll', function () {
    var header = document.querySelector('header');
    header.classList.toggle('scroll-nav', window.scrollY > 0);
  });

  //宿泊予約モーダル(PC)
  $('.js-modal-open').on('click', function () {
    $('.js-modal').fadeIn();
    return false;
  });
  $('.js-modal-close').on('click', function () {
    $('.js-modal').fadeOut();
    return false;
  });

  //宿泊予約モーダル(SP)
  $('.js-modal-sp-open').on('click', function () {
    $('.js-modal-sp').fadeIn();
    return false;
  });
  $('.js-modal-sp-close').on('click', function () {
    $('.js-modal-sp').fadeOut();
    // しかし、画像をクリックでキャンセルさせる
    $('.modal-sp-content-box').on('click', function (e) {
      e.stopPropagation();
    });
    return false;
  });

});

試したこと

.modal-sp-bgにz-index:40;、.hamにz-index:30;を追加してみましたが変わりませんでした。

補足情報(FW/ツールのバージョンなど)

scssで記述しています。
主にjQueryを使用していますが、Javascriptも混ざっています。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

check解決した方法

0

htmlの順番を変えると解決しました。
回答いただいた方、ありがとうございました。

<div class="header-sp-right">
      <nav class="header-sp-nav">
        <ul class="header-sp-menu">
          <li class="header-sp-room header-sp-menu-list"><a href="">お部屋</a></li>
          <li class="header-sp-food header-sp-menu-list"><a href="">お料理</a></li>
          <li class="header-sp-spa header-sp-menu-list"><a href="">温泉</a></li>
        </ul>
        <div class="header-sp-right-right">
          <div class="header-sp-booking">
            <a href="" class="js-modal-sp-open">
              <div class="header-sp-booking-inner">
                <img src="img/calender.png" alt="宿泊予約のカレンダー画像">
                <p>宿泊予約</p>
              </div>
            </a>
          </div>
          <div class="ham">
            <span class="ham-line ham-line1"></span>
            <span class="ham-line ham-line2"></span>
            <span class="ham-line ham-line3"></span>
          </div>
        </div>
      </nav>
      <div class="modal-sp js-modal-sp">
        <div class="modal-sp-bg js-modal-sp-close">
          <div class="modal-sp-contents">
            <div class="modal-sp-content-box">
              <select name="booking-menu">
                <option value="Cha-kaiseki">①【期間限定】海辺の四季旬彩、贅沢美味懐石プラン</option>
                <option value="stay">②平日に優雅に楽しむ、特別宿泊プラン</option>
                <option value="family">③絶景貸切露天と個室会席を満喫できるファミリープラン</option>
              </select>
            </div>
            <a href="" class="js-modal-sp-close">閉じる</a>
          </div>
        </div>
      </div>
    </div>

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

0

同じ親を持っている子同士の場合z-indexの値に関わらず、position: relativeよりposition: absoluteのほうがユーザーから見て手前に配置されます。

したがって、お試しになられたように両者にz-indexを設定した上で、.hamposition: absoluteを設定すればハンバーガーメニューがモーダルの背後に回るようになると思います。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2021/04/08 15:29

    .hamに
    z-index: 30;
    position: absolute;、
    .modal-sp-bgに
    z-index: 40;
    を追加してもハンバーガーメニューが全面に出てきてしまいます…。

    キャンセル

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

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

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