モーダル実装（Bootstrap不使用）

モーダルを実装

モーダルを作りたいと思って調べてみると、
Bootstrapを使えば簡単にできそうです。

しかし、勉強の為にも、１から作ってみました！

HTML

  <div id="modal">
      <div class="modal-content">
         　<div class="modal-body">
            　<h1>hello</h1>
            　<button id="closeButton">Close</button>
          　</div>
       </div>
  </div>
  <!-- モーダル表示用ボタン -->
  <button id="openButton">Open Modal</button>

CSS

#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: white;
　　width: 500px;
　　margin: 15% auto;
}

JavaScript

const modal = document.getElementById('modal');
const openButton = document.getElementById('openButton');
const closeButton = document.getElementById('closeButton');


openButton.addEventListener('click', () => {
  modal.style.display = 'block';
});

closeButton.addEventListener('click', () => {
  modal.style.display = 'none';
});

以上です！