I have a site with a zoom when a product image is clicked, and I was using fancybox. I wanted to get rid of fancybox so I created a simple function that appends some html to the DOM when the zoomModal method is called.

The tricky part is to open the modal with fancybox looks like this:

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

We just have to set the src to the containing block which is shown below. I have this small block of code which is the zoom contents.

<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>

Everything here works great and the vue directives work as they should. However without fancybox I have to call my modal like this

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

and I lose the vue functionality. I don't understand what fancybox.open is doing that I can't seem to replicate in vanilla js. The only thing that works is if I use insertAdjacentElement but that is cut and paste and then when the zoom is opened a second then nothing works since remove() is called on the modal