javascriptでモーダルウィンドウ

初めに

javascriptでモーダルウィンドウのやり方がわかったので忘備録として

とりあえず

モーダルウィンドウっていってもすることはボタンを押されたりしたらモーダルウィンドウを表示するだけ、要はdisplayをnoneにしたりblockにしたりするだけで実装できる。

実装していく

モーダルウィンドウの部分を作っていく

<div id="modal" class="modal">
  <div class="modal-content">
    <div class="modal-body">
      <h1>hello</h1>
    </div>
  </div>
</div>

.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: 40% auto;
}

みたいにする

表示の確認をしたい場合はdisplay:noneをけしてみてください。

こんな感じに表示されると思います。

それで次にボタンを作ります。

<input type="button" id="btn" value='click me'>

そしてjsでこのボタンが押されたときにmodalのdisplayをblockにします。

jsファイルに

var btn = document.getElementById('btn');
var modal = document.getElementById('modal');

btn.addEventListener('click', function() {
  modal.style.display = 'block';
}

こんな感じに書けばモーダルがない状態でボタンを押すとモーダルウィンドウが出てくると思います。

モーダルを消す機能を追加するために

さっきのhtmlを

    <div id="modal" class="modal">
        <div class="modal-content">
            <div class="modal-body">
                <h1>hello</h1>
                <input type="button" id="closeBtn" value="close">  <= 追加
            </div>
        </div>
    </div>

こうします。

このcloseボタンが押された時にmodalのdisplayをnoneにします。

jsファイルに

var closeBtn = document.getElementById('closeBtn');

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

と書き加えます。

これでモーダルウィンドウの表示、非表示ができるようになりました。

またボタンではなく外側の黒い部分を押してもモーダルが消えるようにしたい場合は

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

お加えればOK

後はデザインを適当に加えれば完成です。