HTML

Fancybox can be used to display the HTML element currently on the page (i.e., inline content) or HTML content generated with JS.

Inline content

First, create your HTML element, give it a unique ID attribute, and hide it using CSS:

<div id="dialog-content" style="display:none;max-width:500px;">
  <h2>Hello, world!</h2>
  <p>
    <input type="text" value="" />
  </p>
  <p>
    Try hitting the tab key and notice how the focus stays within the dialog
    itself.
  </p>
  <p>
    To close dialog hit the esc button, click on the overlay or just click the
    close button.
  </p>
  <p>
    Element used to launch the modal would receive focus back after closing.
  </p>
</div>

Declarative

Create your trigger element. Add href or data-src attribute to specify target ID. If you prefer to display a copy of the element, use data-type="clone" attribute. Example:

<button data-fancybox data-src="#dialog-content">Launch Dialog</button>

Hello, world!

Try pressing the Tab key and notice that the user is blocked from navigating the rest of the page.

To close dialog hit the Esc button, click on the overlay or just click the close button.

Element used to launch the modal would receive focus back after closing.

Programmatic

Show HTML element:

Fancybox.show([{ src: "#dialog-content", type: "inline" }]);

Show a copy of the element:

Fancybox.show([{ src: "#dialog-content", type: "clone" }]);

HTML Content

Fancybox uses Carousel under the hood and it supports virtual slides that have an html property. You can use this to display your HTML content:

Fancybox.show([
  {
    html: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br /> Ut semper, justo eget vehicula vestibulum, enim enim suscipit lectus. </p>",
  },
]);

You can mix any content type in the gallery. Example:

Fancybox.show([
  // HTML content
  {
    html: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br /> Ut semper, justo eget vehicula vestibulum, enim enim suscipit lectus. </p>",
  },
  // Video
  {
    src: "https://www.youtube.com/watch?v=z2X2HaTvkl8",
  },
  // Image
  {
    src: "https://lipsum.app/id/68/1600x900",
    type: "image",
  },
]);