HTML

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

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>

TIP

To make text selectable, add the data-selectable attribute to the entire element, or just part of it.

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.

JS Bin Example

Programmatic

Show HTML element:

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

Show a copy of the element:

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

JS Bin Example

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>",
  },
]);

JS Bin Example

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",
  },
]);

JS Bin Example

Ajax

Fancybox also supports loading HTML content using AJAX.

Declarative

Add data-type="ajax" attribute to your elements and specify the source using data-src or href attribute:

<button data-fancybox data-type="ajax" data-src="/ajax.html">
  Load content using AJAX
</button>

To show only part of an AJAX response, use data-filter attribute with a selector:

<button
  data-fancybox
  data-type="ajax"
  data-src="/ajax.html"
  data-filter="#content"
>
  Load content using AJAX and show only element with ID `content`.
</button>

Programmatic

Fancybox.show([
  {
    src: "ajax.html",
    type: "ajax",
  },
]);