グレーアウトなよる

背景

フロント実装にてクリック契機等で既存画面をグレーアウトして新たな要素を出す仕組みを書いたのでその備忘録も兼ねて。
単純にモーダル機能としてだけであればBootstrapで事足りるのですがそれだと少し痒いところに手が届かないよって方向けに。。

実装例

ボタンクリックで背景グレーアウト→画像表示

Grayout.vue

<template>
  <b-button @click="display" variant="primary" class="btn">表示</b-button>

  <div id="grayout" v-show="showFlag">
    <div id="contents">
      <!-- コンテンツを記載 -->
      <img id="image" :src="imgUrl"/>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        imgUrl: '',
        showFlag: false
      }
    },
    methods: {
      display () {
        let random = 0 + Math.floor( Math.random() * 3 );
        if (random == 0) {
          // 大吉
          this.imgUrl = 'https://3.bp.blogspot.com/-vQSPQf-ytsc/T3K7QM3qaQI/AAAAAAAAE-s/6SB2q7ltxwg/s1600/omikuji_daikichi.png'
        } else if (random == 1) {
          // 吉
          this.imgUrl = 'https://2.bp.blogspot.com/-27IG0CNV-ZE/VKYfn_1-ycI/AAAAAAAAqXw/fr6Y72lOP9s/s800/omikuji_kichi.png'
        } else {
          // 凶
          this.imgUrl = 'https://4.bp.blogspot.com/-qCfF4H7YOvE/T3K7R5ZjQVI/AAAAAAAAE-4/Hd1u2tzMG3Q/s1600/omikuji_kyou.png'
        }
        this.showFlag = true
      }
    }
  }
</script>

Grayout.css

<style>
#grayout{
  z-index:1000;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

#contents{
  z-index:1001;
}

z-indexでコンテンツの出す層を設定できます。(数が大きい方が前面に表示)
様々な要素が重なり合う場合の厳密な制御が可能になりますが、1,2,3...で刻むよりは1,10,100,1000...とする方が後々改修する時に楽だったり単純にパッと見でわかりやすいのでおすすめ。