JSFiddle - React, Tailwind, and code Playground

by kurotanshi

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id="app">
  <h4>toggleModal with .self</h4>

  <div class="modal-mask" :style="modalStyle">
    <div class="modal-container"  @click.self="toggleModal">
      <div class="modal-body">Hello!</div>
    </div>
  </div>

  <button @click="isShow = true">Click Me</button>
</div>

SCSS

#app {
  display: block;
  overflow: hidden;
  width: 100%;
}

h4 {
  margin: 1rem 0;
  font-size: 1rem;
}

.modal-mask {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: table;
  background-color: rgba(0, 0, 0, .5);
  transition: opacity .3s ease;
}

.modal-container {
  cursor: pointer;
  display: table-cell;
  vertical-align: middle;
}

.modal-body {
  cursor: auto;
  display: block;
  width: 50%;
  margin: 0 auto;
  padding: 2rem;
  background-color: #fff;
}

JavaScript

const vm = Vue.createApp({
  data: () => {
    return {
      isShow: false
    }
  },
  computed: {
    modalStyle() {
      return {
        'display': this.isShow ? '' : 'none'
      };
    }
  },
  methods: {
    toggleModal() {
      this.isShow = !this.isShow;
    }
  }
}).mount('#app');