横からスライドするモーダルの作り方

クリックすると、横からスライドして表示されるモーダルの作り方です。

作り方🍳

1. ボタンとモーダルのdivを置く

sample.html

<button>Click!</button>
<div class="slide-modal"></div>

2. slide-modalクラスにCSSを当てていく

1. position:fixed;を指定して、スライドモーダルをどの位置に表示するか指定する
2. 特定のクラスが付与されたときにスライドモーダルを表示するために、slide-modalクラスにshowクラスがついた時のスタイルを用意する（クラス名はなんでも良い）
3. showクラスにはdisplay: block;とoverflow: hidden;を指定する

sample.scss

.slide-modal {
  position: fixed;
  top: 0;
  right: 0;
  width: 500px;
  height: 500px;

  &.show {
    display: block;
    overflow: hidden;
  }
}

お好みでスライドモーダルの出し入れの速さを調整したり、重なり順を調整したりする。

sample.scss

.slide-modal {
  position: fixed;
  top: 0;
  right: 0;
  width: 500px;
  height: 500px;
  background-color: #90CAF9;
  transform: translateX(100%) translateY(0px) translateZ(0px);
  transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);

  &.show {
    display: block;
    overflow: hidden;
    transform: translateX(0%) translateY(0px) translateZ(0px);
    transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
  }
}

3. JSでshowクラスの付け外しを行う

HTMLにJS用のクラスを付与する。

sample.html

<button class="js-click-showSlideModal">Click!</button>
<div class="slide-modal js-target-slideModal"></div>

JSファイルに処理を追加する。

sample.js

document
  .querySelector(".js-click-showSlideModal")
  .addEventListener("click", function () {
    const slideModal = document.querySelector(".js-target-slideModal");
    
    if (slideModal.classList.contains("show")) {
        slideModal.classList.remove("show");
    } else {
        slideModal.classList.add("show");
    }
  });

4. 完成！

See the Pen Untitled by kidorina (@kidorina) on CodePen.