【コピペOK】JavaScriptを使ってモーダルウィンドウを作ろう / chillblog

Contents

モーダルウィンドウとは

モーダルウィンドウとは、特定の操作を行なわないと、他の画面を操作できないウィンドウのことです。

モーダルウィンドウの主な役割は、以下の通りになります。

  • 情報を分かりやすく伝達させる
  • 警告メッセージを表示する
  • エラーの通知をする
  • ロード中の操作を防ぐ

モーダルウィンドウと酷似しているものとして、ポップアップウィンドウがあります。

ポップアップウィンドウについての詳しい記事はこちらから。

コード

html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>モーダルウィンドウ</title>
</head>
<body>
    <div class="item">
        <div class="item-card">
            <img class="img1" src="https://picsum.photos/id/237/400/300" alt="">
            <button class="open">view more</button>
        </div>
        <div class="item-card">
            <img class="img1" src="https://picsum.photos/id/237/400/300" alt="">
            <button class="open">view more</button>
        </div>
        <div class="item-card">
            <img class="img1" src="https://picsum.photos/id/237/400/300" alt="">
            <button class="open">view more</button>
        </div>
    </div>
    <div id="window" class="modal">
      <div class="modal-content">
        <div class="modal-header">
          <h1>タイトルが入ります</h1>
          <span class="Close">×</span>
        </div>
        <div class="modal-main">
          <img class="img2" src="https://picsum.photos/id/237/400/300" alt="">
          <p>ここにテキストが入ります。ここにテキストが入ります。</p>
        </div>
      </div>
    </div>
      <script src="window.js"></script>
</body>
</html>

css

@charset "utf-8";

body {
    font-family: serif;
    font-size: 16px;
    line-height: 1.6;
    color: #fff;
  }

  .item{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .item-card{
    width: 30%;
    text-align: center;
  }
  
  .open {
    display: inline-block;
    background: #000;
    color: #fff;
    padding: 0 2em;
    border: 0;
    width: 100%;
    height: 50px;
    font-size: 15px;
    border-radius: 5px;
    font-weight: 900;
    font-family: serif;
  }
  
  .open:hover {
    background: #f1590d;
    cursor: pointer;
  }

  .img1{
    width: 100%;
    border-radius: 10px;
}

.img2{
    width: 100%;
}
  
  .modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5);
  }
  
  .modal-content {
    background-color: #fff;
    margin: 20% auto;
    width: 50%;
    box-shadow: 0 5px 8px 0 rgba(0,0,0,0.2),0 7px 20px 0 rgba(0,0,0,0.17);
    border-radius: 10px;
    animation-name: modalopen;
    animation-duration: 1s;
  }
  
  @keyframes modalopen {
    from {opacity: 0}
    to {opacity: 1}
  }
  
  .modal-header h1 {
    font-size: 15px;
    margin:10px 0 5px;
  }
  
  .modal-header {
    background: #000;
    border-radius: 10px  10px 0 0;
    padding: 0 5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  p{
    color: #000;
    font-style: 12px;
    padding: 2% 5% 5% 5%;
  }
  
  .Close {
    font-size: 2rem;
  }
  
  .Close:hover {
    cursor: pointer;
  }
  
  .modal-body {
    padding: 10px 20px;
    color: black;
  }

JavaScript

const buttonOpen = document.querySelectorAll('.open');
const modal = document.getElementById('window');
const buttonClose = document.getElementsByClassName('Close')[0];

for(let i=0;i<buttonOpen.length;i++){
buttonOpen[i].addEventListener('click', Open);
function Open() {
  modal.style.display = 'block';
}
}

buttonClose.addEventListener('click', Close);
function Close() {
  modal.style.display = 'none';
}

addEventListener('click', outsideClose);
function outsideClose(e) {
  if (e.target == modal) {
    modal.style.display = 'none';
  }
}

まとめ

今回ご紹介したモーダルウィンドウは、Web制作において要所々々で使われる技術になってくるので、上記のコードを自分なりにカスタマイズして、オリジナルのモーダルウィンドウを作りましょう。

この記事が少しでもWeb制作の役に立てたら幸いです。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA