vuejs modal

application.html.slim

    #modal-vue
      modal v-if="showModal" @close="showModal = false"

    script type="text/x-template" id="modal-template" ref="modal"
      transition name="modal"
        .modal-mask
          .modal-wrapper
            div class="w-2/3 modal-container"
              .modal-header
                slot name="header" 
                  | default header
              #modal-body.modal-body
                slot name="body" 
                  | Please wait.
    javascript:
      // register modal component
      myModal = Vue.component('modal', {
        template: '#modal-template'
      })

      // start app
      modalApp = new Vue({
        el: '#modal-vue',
        components: { 'my-component': myModal },
        data: {
          showModal: false
        }
      })
    css:
      .modal-mask {
        position: fixed;
        z-index: 9998;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, .5);
        display: table;
        transition: opacity .3s ease;
      }

      .modal-wrapper {
        display: table-cell;
        vertical-align: middle;
      }

      .modal-container {
        margin: 0px auto;
        padding: 20px 30px;
        background-color: #fff;
        border-radius: 2px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
        transition: all .3s ease;
        font-family: Helvetica, Arial, sans-serif;
      }

      .modal-header h3 {
        margin-top: 0;
        color: #42b983;
      }

      .modal-body {
        margin: 20px 0;
      }

      .modal-default-button {
        float: right;
      }

      /*
      * The following styles are auto-applied to elements with
      * transition="modal" when their visibility is toggled
      * by Vue.js.
      *
      * You can easily play with the modal transition by editing
      * these styles.
      */

      .modal-enter {
        opacity: 0;
      }

      .modal-leave-active {
        opacity: 0;
      }

      .modal-enter .modal-container,
      .modal-leave-active .modal-container {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
      }