JSFiddle - React, Tailwind, and code Playground

by mogu10

HTML

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <button @click="active">リンク先は不要、実際は表示/非表示を切り替えるだけ</button>
   <div v-if="isActive" class="modal js-modal">
        <div class="modal__bg js-modal-close"></div>
        <div class="modal__content">
            <p>ここにモーダルウィンドウで表示したいコンテンツを入れます。モーダルウィンドウを閉じる場合は下の「閉じる」をクリックするか、背景の黒い部分をクリックしても閉じることができます。</p>
            <a class="js-modal-close" href="">閉じる</a>
        </div><!--modal__inner-->
    </div><!--modal-->
    <div v-else>ああああ</div>
</div>

CSS

.modal {
  width: 300px;
  margin: auto;
}

JavaScript

new Vue({
  el: '#app',
  data: {
    isActive: true
  },
  methods: { 
    active: function () {
      this.isActive = !this.isActive
    }
  }
})