【JavaScript入門】モーダルウィンドウ

はじめに

Webサイトを作成する際、
・ボタン、画像を押したときにポップアップする小ウィンドウを設置したい
と思うことあると思います。
今回は、そんな機能についてご紹介します。

手順①　表示・非表示機能をつくる

まずは、モーダルウィンドウの根幹となる表示・非表示の機能を作ります。

html_javascript

<form>
  <input type="button" id="openBtn" value="モーダル">
</form>

<!-- モーダルウィンドウで表示する部分 -->
<div id="modal" class="modal">
  <div class="modal_content">
    <h1>Hello</h1>
    <input type="button" id="closeBtn" value="閉じる">
  </div>
</div>

<!-- モーダルウィンドウ -->
<script>
  var openBtn = document.getElementById('openBtn');
  var closeBtn = document.getElementById('closeBtn');
  var modal = document.getElementById('modal');

  // 表示（openBtnというidのボタンがクリックされたら、display:blockになる）
  openBtn.addEventListener('click', function(){
      modal.style.display = 'block';
  })

  // 非表示（closeBtnというidのボタンがクリックされたら、display:noneになる）
  closeBtn.addEventListener('click', function(){
      modal.style.display = 'none';
  })
</script>

css

/* ボタンがクリックされたときに表示したいので、displayはnoneに設定 */
.modal{
    display: none;
}

これでは、まだウィンドウとして形になっていないので、CSSにいくつか追記する必要があります。

手順②　CSSでデザインする

次に、見栄えの良いモーダルウィンドウになるようCSSを書いていきます。

css

.modal{
  display: none;
  background: rgba(0,0,0,0.5);
  /* モーダルウィンドウの位置固定 */
  position: fixed;
  /* 背景色を画面いっぱいにする */
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;  
}

.modal_content{
  background: #fff;
  width: 500px;
  /* モーダルウィンドウを画面真ん中に表示 */
  margin: 25% auto;
}

これで一通りは完成ですが、最後にひと工夫入れます。

手順③　背景色をクリックで非表示

最後に、背景をクリックしたときも閉じれるようにしていきます。

javascript

// 背景クリックで非表示（modalというidの部分がクリックされたら、display:noneになる）
addEventListener('click', function(close_bg){
  if(close_bg.target === modal){
    modal.style.display = 'none';
  }
})

以上でモーダルウィンドウの実装は完了です。

あとは、ご自身でCSSを触ることでバリエーションができると思います。

参考

Event.target
javascriptでモーダルウィンドウ