Tengo un sitio con un zoom cuando se hace clic en la imagen de un producto, y estaba usando fancybox. Quería deshacerme de fancybox, así que creé una función simple que agrega algo de html al DOM cuando se llama al método zoomModal.

La parte complicada es abrir el modal con fancybox se ve así:

 setTimeout(() => { $.fancybox.open({ src: '.zoom-container', type: 'inline', opts: { modal: true } }); }, 150)

Solo tenemos que establecer el src en el bloque contenedor que se muestra a continuación. Tengo este pequeño bloque de código que es el contenido del zoom.

 <div class="zoom-container"> <div class="js-container_main_image"> <img class="js-product-image" :src="selected_product.images[zoom_image_index].src" alt="" title="" /> </div> <div class="zoom_thumbnails_container js-thumbnails_container"> <div class="js-thumbs"> <img class="js-product-image" :class="{selected: zoom_image_index == imageIndex}" v-for="(image, imageIndex) in selected_product.images" :src="_utils.resizeImage(image.src, 'x950')" :alt="image.alt" :title="selected_product.title" @click="zoom_image_index = imageIndex" /> </div> </div> </div>

Todo aquí funciona muy bien y las directivas vue funcionan como deberían. Sin embargo, sin fancybox, tengo que llamar a mi modal así

 zoomModal.open() const zoomContent = document.querySelector('.zoom-container').cloneNode(true) document.querySelector('.zoom-modal').append(zoomContent)

y pierdo la funcionalidad de vue. No entiendo qué está haciendo fancybox.open que parece que no puedo replicar en vanilla js. Lo único que funciona es si uso insertAdjacentElement pero eso es cortar y pegar y luego, cuando se abre el zoom por un segundo, nada funciona ya que se llama remove () en el modal