[Rails]BulmaフレームとVanillaJavaScriptでモーダルを実装

####はじめに
BulmaというCSSフレームワークはJavascriptファイルは付属していないため
処理は自身のJavascriptでかく必要があります。
jQueryで実装している記事が多いのですが、初学者のため練習も兼ねて素のJavaScriptで実装してみました。

####前提と環境
Rails 6.0.3
mySQL 8.0
Dockerformac
######Bulmaは導入済みということにします。Bulma導入方法は他に記事がたくさんありますのでそちらを確認いただければ。

##Bulmaのモーダルを用意

Bulmaのモーダル
他にも色々便利なフレームがあります。
基本的にやり方は同じです。

_form.html.erb

<div class="modal">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Modal title</p>
      <button class="delete" aria-label="close"></button>
    </header>
    <section class="modal-card-body">
      <!--ここにモーダルに入れたい内容を記述 -->
    </section>
    <footer class="modal-card-foot">
      <button class="button is-success">Save changes</button>
      <button class="button">Cancel</button>
    </footer>
  </div>
</div>

上記とは別にトリガーとなるボタンを置きたい場所に適当に設置

<button type="button is-success" id="button">この商品のレビューをかく</button>

このボタンにid="button"としてidを付与する

同様に_form.html.erbのmodalクラスと真ん中ほどにある表示を消す×ボタンのにidをつけます。

_form.html.erb

<div class="modal" id="page-modal">
.
.
.
<button class="delete" aria-label="close" id="hide"></button>

##JavaScriptの作成
JavaScriptのファイルを作成します。

modal.js

//先ほどのidを定義
var buttton = document.getElementById('button'); 
var modal = document.getElementById('page-modal');
var close = document.getElementById('hide');

//ボタンを押すとモーダルが表示させる処理
buttton.onclick = function(){
    modal.style.display = 'block';
//×を押すとモーダルを非表示にする処理
close.onclick = function(){
  modal.style.display = 'none';

実際ここまでで、モーダルを表示、非表示にさせる機能が完成なのでOKですが、モーダルが表示されている時に×印までカーソルを合わせなくともバックグラウンドのグレー部分のどこかをクリックするだけでモーダルを消せる、よくみるあの機能も追加したいと思います。

modal.js

//ウィンドウをクリックしたらディスプレイを非表示にするという処理
window.onclick = function(event){
  if (event.target.className == 'modal-background'){
      modal.style.display = 'none';
  }

if分の中身はモーダルのバックグラウンドのclassNameをデベロッパツールで確認するといいです。
これでついに実装完了です。

こちらのyoutubeは大変参考になりました。

JavaScript For Bulma - Modals
Travis Media

初学者のため至らない点や間違いのご指摘などありましたら、ご連絡いただきますようお願いします。どなたかの参考になれば幸いです。