モーダルウィンドウを使うときのHTML構成

自作webアプリ3 競走成績ジェネレータ Rails

モーダル表示中はモーダル外を暗くしてその暗い部分をクリックしたときにモーダルが閉じるようにする。

やり方はこんな感じ



f:id:naito-coding0322:20181203131209p:plain
イメージ

最前面
①モーダル
②クリックした時にモーダルを閉じる@clickを仕込む filter
③暗くして操作不可(pointer-events: none;)にする shadow
④サイドバーやヘッダー含む画面上のコンテンツ
最後面

application.html.erb

  <body>
      <div class="app_name filter" @click="toggleModal()">

          <div class="side-menu" :class="{'shadow' : isModalActive}">
              <%= render 'layouts/side_menu' %>
          </div>

          <div class="contents" :class="{'shadow' : isModalActive}">
              <%= yield %>
          </div>

          <%= render 'modal' %>
        
      </div> 
      <%= javascript_pack_tag 'index' %>  
  </body>


index.js

new Vue({
  el:  '.app_name',
  data:  {
    isModalActive: false,
  },
  methods: {
    toggleModal(){
       this.isModalActive = ! this.isModalActive;
      }
  }
)}


css

.contents{
 width:  略
 height: 略
 z-index: 1;
}

.side-menu{
 width:  略
 height: 略
 z-index: 2;
}

.shadow{
 height: 100%;
 width: 100%;
 opacity: 0.2;
 z-index: 3;
 pointer-events: none;
}

.filter{
 height: 100%;
 width: 100%;
 z-index: 4;
}

.modal{
 略
 z-index: 5;
}


今回作ったモーダルはXボタンクリックで閉じるようにしたけど、次回からはこれでいけるはず。