Fancybox

npm docs github

Актуальная версия на момент написания 5.0.36

npm i @fancyapps/ui

Использование

HTML

<div hidden id="modal">Lorem ipsum dolor sir amet...</div>
<button type="button" data-fancybox data-src="#modal">Open modal</button>

Импорт стилей

@import "@fancyapps/ui/dist/fancybox/fancybox.css";

Подключение js

import { Fancybox } from "@fancyapps/ui";

Fancybox.bind("[data-fancybox]", {
  //
});

Кнопка закрытия

Если нужна кастомная кнопка закрытия, то можно указать шаблон для кнопки:

Fancybox.bind("[data-fancybox]", {
  tpl: {
    closeButton: "<button data-fancybox-close>close button</button>",
  },
});