JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

ローディングアニメーション

ツールチップ

ヘッダー

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

JavaScriptのstyle.displayでモーダル

お気に入り登録をすると、お気に入り記事一覧に登録することができます。

style.display

JavaScriptのstyle.displayでモーダル

JavaScriptのstyle.displayでモーダル

JavaScriptの style.display で、要素のdisplayプロパティを変更できます。この記事では、そのプロパティでモーダルを作ります。

style.display

style.displayは、要素のdisplayプロパティを変更出来るプロパティです。

この記事ではモーダルに使っていますが、例えばスクロールイベントで表示・非表示を切り替えたり、クリックイベントで使ったりと、いろんな用途に使えます。

かかかず
かかかず

jQueryだと、$("#hoge").css("display", "none"); のように書くプロパティです。

style.displayを使ったモーダルのサンプル

早速、style.displayを使ったモーダルのサンプルです。

以下のボタンをクリックかタップください。すると、上部からモーダルが落ちてきます。

モーダルのサンプルは、.style.display = 'none'; の非表示と、.style.display = 'block';で表示させる二つを使っています。

style.displayを使ったモーダルのコード

HTMLは、大きく分けてボタンとモーダルの2つでできています。

下記の通り、ボタンはシンプルに button タグで記述して、モーダルはid="myModal" 以降の中に記述していきます。

<button class="btn">モーダルのボタン</button>
<!-- The Modal -->
<div id="myModal" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-content-left">
      <img src="http://placehold.jp/1080x1440.png">
    </div>
    <div class="modal-content-right">
      <div class="modal-header">
        <p>モーダルの見出し</p>
        <span class="modalClose">×</span>
      </div>
<!-- modalInner -->
      <div class="modal-body">
        <p>Windowsでコンピューターの世界が広がります。1234567890Windowsでコンピューターの世界が広がります。1234567890Windowsでコンピューターの世界が広がります。1234567890Windowsでコンピューターの世界が広がります。12345</p>
        <p>Windowsでコンピューターの世界が広がります。1234567890Windowsでコンピューターの世界が広がります。1234567890Windowsでコンピューターの世界が広がります。1234567890Windowsでコンピューターの世界が広がります。12345</p>
      </div>
<!-- modalInner -->
    </div>
  </div>
</div>

JavaScriptは、for文のループを使って、.onclick でdisplayプロパティを操作します。

const modal = document.querySelector("#myModal");
const btn = document.querySelectorAll(".btn");
const closeModal = document.getElementsByClassName("modalClose")[0];

for (let i = 0; i < btn.length; i++) {
  btn[i].addEventListener("click", function () {
    modal.style.display = "block";
  });
}
btn.onclick = function () {
  modal.style.display = "block";
};
closeModal.onclick = function () {
  modal.style.display = "none";
};
window.onclick = function (event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
};

CSS

JavaScriptでは、displayプロパティのみ操作するので、見た目やデザインはCSSで整えましょう。

以下は、この記事のモーダルのCSSです。カスタマイズするなりして使ってみてください。

.modal {
  display: none;
  position: fixed;
  z-index: 2;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.5);
  transition: 0.4s ease-out;
}

.modal-content {
  position: relative;
  margin: auto;
  padding: 0;
  width: 95%;
  max-width: 60rem;
  border-radius: 2px;
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s;
  background: #fff;
  -webkit-box-shadow: 0px 0px 19px 3px rgba(0, 0, 0, 0.08);
  -moz-box-shadow: 0px 0px 19px 3px rgba(0, 0, 0, 0.08);
  box-shadow: 0px 0px 19px 3px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
}

.modal-content-left,
.modal-content-right {
  flex: 0 1 auto;
}

.modal-content-left {
  flex: 2;
}

.modal-content-left img {
  width: 40rem;
  max-width: 95%;
  margin: 0;
  padding: 0;
  display: block;
  border-radius: 2px;
}

.modal-content-right {
  flex: 2;
  max-width: 100%;
  padding: 1rem 2rem 1rem 1rem;
}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {
    top: -300px;
    opacity: 0;
  }
  to {
    top: 0;
    opacity: 1;
  }
}

@keyframes animatetop {
  from {
    top: -300px;
    opacity: 0;
  }
  to {
    top: 0;
    opacity: 1;
  }
}

/* The Close Button */
.modalClose,
.close-imp {
  color: #aaa;
  font-size: 2rem;
  font-weight: bold;
  padding: 0 1.5rem;
  border-radius: 2px;
  transition: 0.4s ease-out;
  position: absolute;
  top: 0;
  right: 0;
}

.modalClose:hover,
.modalClose:focus,
.close-imp:hover,
.close-imp:focus {
  color: #111;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  font-size: 2.4rem;
  margin: 0;
  padding: 0;
}

.modal-header p {
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
}

/* The Button */

.btn {
    margin: 0 auto;
    display: block;
    position: relative;
    padding: 10px 25px;
    color: #313131;
    transition: 0.3s ease-in-out;
    font-weight: 600;
    background: #f0db40;
    filter: drop-shadow(0px 2px 4px #ccc);
    border-radius: 3px;
    letter-spacing: 0.04rem;
}

.btn:hover {
   transform: translateY(-2px);
    box-shadow: 0 15px 30px -5px rgb(0 0 0 / 15%), 0 0 5px rgb(0 0 0 / 10%);
}

@media screen and (max-width: 767px) {
/* (ここにモバイル用スタイルを記述) */
.modal-content {
    flex-direction: column;
    margin-bottom: 50px;
    width: 80%;
}
.modal-content-left img {
    max-width: 100%;
}
.modal-content-right {
    padding: 20px 25px 10px;
}
}