[js基礎⑧]モーダルを横からふわっとスライドさせる。

2024年12月15日

javascriptでモーダルを横からふわっとスライドさせたい。

Webサイトでよくある、ボタンをクリックすると横からふわっとスライドしてくるモーダル。
今日はその実装例を紹介します。

実装例

さてまずは実装例です。

See the Pen Untitled by 勇飛高松 (@ngcorrsc-the-solid) on CodePen.

スライドボタンを押すとモーダルが開き、
閉じるボタンを押すとモーダルが閉じます。

実装の流れは下記です。
①モーダルの初期位置を、「right: -350px;」で画面外に配置する。
②is-visibleが付いたときの位置を、「 right: 0px;」で画面上に設置する。
③jsでボタンをクリックすると、is-visibleをつけ外しする。

次の章で詳細を説明します。

コード解説

①モーダルの初期位置を、「right: -350px;」で画面外に配置する。

.slide-panel {
  z-index: 10000;
  position: fixed;
  top: 0;
  right: -350px; /* 初期状態で画面外 */
  width: 300px;
  height: 100%;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
  padding: 20px;
  transition: right 0.3s ease;
}

初期位置を-350pxにして画面外に配置します。
transition: right 0.3s ease;をつけることで、0.3秒かけてrightが変化するという仕様にしています。

②is-visibleが付いたときの位置を、「 right: 0px;」で画面上に設置する。

.slide-panel.is-visible {
  right: 0; /* 横にスライドイン */
}

is-visibleが付いたときに、right: 0;になることで横からスライドするように見せれます。

③jsでボタンをクリックすると、is-visibleをつけ外しする。

document.querySelector('.slide-panel');
const closeButton = document.querySelector('.modal-btn');

toggleButton.addEventListener('click', () => {
  slidePanel.classList.add('is-visible');
});

closeButton.addEventListener('click', () => {
  slidePanel.classList.remove('is-visible');
});

toggleButtonをクリックすると、
モーダルにis-visibleが付与される。＝事前に設定したcssにより、スライドインする。

closeButtonをクリックすると、
モーダルからis-visibleが削除される。＝モーダルは画面外に配置されるので、フェードアウトされる。

以上、これで横からモーダルをスライドさせる実装ができました。