>Zina в 08:45, 9 березня 2023

2023-03-09T08:45:12Z

Нова сторінка

== Vue Modal Window ==

Состоит из:

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

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

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

* HTML — разметка <code>template</code> и кнопки, и модального окна:

<source lang="html">
<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>
</source>

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

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

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

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

<source lang="css">
.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);
}
</source>

=== См. также ===

Про $emit:

* https://stackoverflow.com/questions/54417764/vue-js-modal-how-can-i-get-response-from-modal
* [https://vuejsexamples.com/build-a-custom-modal-component-in-vue-js/ 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://fancyapps.com/fancybox/3/ офсайт])
* https://codepen.io/codyhouse/pen/vEVjJg — аналог на jQuery и Velocity ([https://codyhouse.co/gem/morphing-modal-window статья], [https://codyhouse.co/demo/morphing-modal-window/index.html демо])
** https://webdevtrick.com/morphing-modal-window/ — другая статья про ту же технику ([https://webdevtrick.com/demos/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

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

* [https://codepen.io/rppld/pen/vOvdyQ Modal]
* [https://codepen.io/knyttneve/pen/dgoWyE login modal]
* [https://codepen.io/lassediercks/pen/rPxbYM Css Only toggle]

Modal - Історія редагувань

>Zina в 08:45, 9 березня 2023