LoginSignup
1
3
@yokoto

モーダルの実装から学んでいくHTML・CSS・JS

Last updated at Posted at 2022-01-02

背景

  • 雑にコード書いて自分で解説しながらHTMLとCSSとJS少しを勉強する。

モーダルの構造・要件

  • 以下3つのレイヤーからなる。
  1. ウィンドウ
  2. 背景
  3. ダイアログ

1. ウィンドウ

  • モーダルを開く前に表示されているレイヤー。
  • モーダルはこのレイヤーを覆うように表示されることになる。

今回は body タグがこれに相当する。

2. 背景

  • モーダルを開くボタンを押すと、ベースのレイヤーを覆うように表示される薄暗いレイヤー。
  • 背景を押すと、モーダルは閉じられる仕様になっていることが多い。
  • overlay と呼ばれることもある。

今回は .modal というクラスで表す。

3. ダイアログ

  • 背景の上に表示されるレイヤー。
  • ここに文章やボタンが表示される。
  • 閉じるボタンが併せて表示されていることが多い。

今回は .modal-content というクラスで表す。

参考リンク

実装と解説

HTML

<body>
  <div class="container">
    <!-- モーダルを開くボタン -->
    <a class="js-modal-open" href="javascript:void(0);">
      <span>モーダルを開く</span>
    </a>
  </div>

  <!-- モーダル -->
  <div class="modal" id="modal">
    <div class="modal-content" id="modal-content">
      <button class="modal-content__btn-close js-modal-close" type="button">
        <img alt="閉じる" src="icon_close.svg">
      </button>
      <div class="modal-content__body">
        <div>
          <p>
            これがモーダルの中身の文章です。
          </p>
          <button class="js-modal-close" type="button">
            閉じる
          </button>
        </div>
      </div>
    </div>
  </div>
</body>

CSS（SCSS）

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 11;
  width: 100%;
  height: 100%;
  background-color: rgba(#000, 0.7);
  overflow: auto;
}

.modal-content {
  position: relative;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 12;
  margin: 30px 20px;
  &__btn-close {
    position: absolute;
    top: -10px;
    right: -10px;
    z-index: 12;
  }
  &__body {
    padding: 20px;
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 10px;
    overflow: scroll;
  }
}

modal

modal-content

&__btn-close

&__body

JavaScript（jQuery）

// ダイアログを開くボタンをクリックした時
$('.modal-open').on('click', () => {
  $('body').css({ 'overflow': 'hidden' });
  $('#modal').show();
  $('#modal-content').show();
});

// ダイアログの外側をクリックした時
$('#modal').off('click').on('click', e => {
  if (e.target !== $('#modal')[0]) { return }

  $('body').css({ 'overflow': '' });
  $('#modal').hide();
  $('#modal-content').hide();
});

// ダイアログの閉じるボタンをクリックした時
$('#modal-content').off('click').on('click', '.js-modal-close', () => {
  $('body').css({ 'overflow': '' });
  $('#modal').hide();
  $('#modal-content').hide();
});

HTML・CSSの前提知識集

<!-- BEMを使った例 -->
<form class="site-search site-search--full">
    <input type="text" class="site-search__field">
    <input type="Submit" value ="Search" class="site-search__button">
</form>

おまけ（発展）

# Sassを採用した場合のFLOCSSによるディレクトリ構成
├── foundation
│   ├── _base.scss
│   └── _reset.scss
├── layout
│   ├── _footer.scss
│   ├── _header.scss
│   ├── _main.scss
│   └── _sidebar.scss
└── object
    ├── component
    │   ├── _button.scss
    │   ├── _dialog.scss
    │   ├── _grid.scss
    │   └── _media.scss
    ├── project
    │   ├── _articles.scss
    │   ├── _comments.scss
    │   ├── _gallery.scss
    │   └── _profile.scss
    └── utility
        ├── _align.scss
        ├── _clearfix.scss
        ├── _margin.scss
        ├── _position.scss
        ├── _size.scss
        └── _text.scss
1
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
3