Modal

Vue Modal Window

Состоит из:

• JS — в котором определяется имя компонента, ID шаблона, инициализация Vue:

<script>
  // register modal component
  Vue.component("modal-name", {
    template: "#modal-template"
  });

  // start app
  new Vue({
    el: "#app",
    data: {
      showModal: false
    }
  });
</script>

• HTML — разметка template и кнопки, и модального окна:

<script type="text/x-template" id="modal-template">
<transition name="modal">
  <div class="modal-mask">
    <div class="modal-wrapper">
      <div class="modal-container"></div>
    </div>
  </div>
</transition>
</script>

В HTML коде страницы шаблон должен быть размещен выше вызова скрипта.

• HTML — вставка тэга компонента с параметрами в нужную часть HTML:

<modal-name v-if="showModal" @close="showModal = false"></modal-name>

Минимальный набор классов:

.modal-container {
  /* @apply fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2; */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Анимации */
.modal-enter {
  opacity: 0;
}
.modal-leave-active {
  opacity: 0;
}
.modal-enter .modal-container,
.modal-leave-active .modal-container {
  transform: scale(1.1);
}

См. также

Про $emit:

• https://stackoverflow.com/questions/54417764/vue-js-modal-how-can-i-get-response-from-modal
• Build A Custom Modal Component In Vue.js
  • https://github.com/Emodot/Creating-Modal-Components/blob/main/pages/index.vue

Примеры

• https://codepen.io/chriscoyier/embed/BajXKRW — простой, с учетом overflow

Morphing Modal Window

• https://codepen.io/J3rome/pen/YEoXJq — Fancybox 3 (jQuery), наиболее хороший пример (офсайт)
• https://codepen.io/codyhouse/pen/vEVjJg — аналог на jQuery и Velocity (статья, демо)
  • https://webdevtrick.com/morphing-modal-window/ — другая статья про ту же технику (демо)
• https://codepen.io/gregh/pen/rjbmXb — UI: Button morphing into form (Vue 2)
• https://codepen.io/ettrics/pen/Jdjdzp — красивые, кажется, на чистом JS
• https://codepen.io/toastal/pen/QyJeOB — наиболее навороченный, на React

Анимации появления

• Modal
• login modal
• Css Only toggle