<div id="app" :class="{'overlay':modalWindow}">
  <p @click="open" class="red">ここをクリック</p>
  <p>ある日の暮方の事である。一人の下人げにんが、羅生門らしょうもんの下で雨やみを待っていた。広い門の下には、この男のほかに誰もいない。ただ、所々丹塗にぬりの剥はげた、大きな円柱まるばしらに、蟋蟀きりぎりすが一匹とまっている。羅生門が、朱雀大路すざくおおじにある以上は、この男のほかにも、雨やみをする市女笠いちめがさや揉烏帽子もみえぼしが、もう二三人はありそうなものである。それが、この男のほかには誰もいない。</p>

  <div v-if="modalWindow" class="modal">
    <div class="modal__container">
      <p>羅生門/芥川龍之介</p>
      <button @click="open">閉じる</button>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
*
  margin: 0
  padding: 0
  box-sizing: border-box

body
  position: relative

p
  font: 3em serif
  &.red
    color: #d94545
    text-align: center

.modal
  background: white
  position: absolute
  left: 0
  right: 0
  top: 0
  bottom: 0
  margin: auto
  width: 50%
  height: 50vh
  z-index: 9999999
  overflow-y: scroll
  &__container
    width: 95%
    padding: 10px 2.5%
    poistion: relative
    &>p
      font-size: 1em
    &>button
      position: absolute
      bottom: 10px
      left: 0
      right: 0
      margin: auto
      background: #545454
      color: white
      width: 50%
      line-height: 3
      border-radius: 30px
      
  
.overlay
  background: rgba(0,0,0,.9)
  width: 100%
  height: 100vh
  overflow: hidden
View Compiled
let vm = new Vue({
  el: '#app',
  data: {
    modalWindow: false,
  },
  methods: {
    open(){
      this.modalWindow =! this.modalWindow
    }
  }
})
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.