モーダルを閉じるボタンを最前面に配置したい。

Question

前提・実現したいこと

CodeSandBox
上記のデモは「モーダルを開く」ボタンを押すとモーダルが表示されます。
モーダル領域以外をクリックすると、モーダルを閉じます。
モーダルの開閉はjQueryを使用しています。

現状、モーダルの後面にモーダルを閉じるボタンがあるので、閉じるボタンをモーダルよりも前面に配置したいです。

該当のソースコード

<button id="openModal">モーダルを開く</button>
<aside id="modal_background" class="close">
  <button>
    閉じる
  </button>
</aside>
<aside id="modal" class="close">
  <div class="modal_contents">
    <h2>モーダルの中</h2>
  </div>
</aside>

* {
  box-sizing: border-box;
}

body {
  background-color: #aaa;
  color: white;
}

button {
  cursor: pointer;
}

#modal_background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  opacity: 1;
  transition: opacity 0.3s;
}

#modal_background.close {
  opacity: 0;
  pointer-events: none;
}

#modal_background button {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 8px;
  color: white;
  background-color: black;
  z-index: 1;
}

#modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  transform: scale(1);
  transition: transform 0.3s;
}

#modal.close {
  transform: scale(0);
}

.modal_contents {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 16px;
  color: black;
  min-width: 90%;
  min-height: 90%;
}

$(function () {
  const closeModal = (e) => {
    if (e.target.closest(".modal_contents")) return;
    $("#modal").addClass("close");
    $("#modal_background").addClass("close");
    $("#modal").off("click");
  };

  $("#openModal").click(() => {
    $("#modal_background").removeClass("close");
    $("#modal").removeClass("close");
    $("#modal").on("click", closeModal);
  });
});

試したこと

閉じるボタンにz-index: 1を設定してみましたが効果はありませんでした。

Answer 1

閉じるボタンをモーダルの中に設け、閉じるボタンをモーダルの外に配置するのはいかがでしょうか？

以下であれば、モーダルの前面に閉じるボタンを配置できました。

　　<aside id="modal" class="close">
      <div class="modal_contents">
        <button> // 閉じるボタンをモーダル内に移動
          閉じる
        </button>
        <h2>モーダルの中</h2>
      </div>
    </aside>

// ボタン位置をモーダル外に配置
.modal_contents button {
  position: fixed;
  top: 16px;
  right: 16px;
}