How to open DOM Element with Featherlight on Page Load?

Question

I'm having trouble getting a Featherlight modal window to show content on page load.

https://github.com/noelboss/featherlight/#usage

https://jsfiddle.net/axxdy4we/

Open Featherlight DOM with Link

<a href="#" class="my-content" data-featherlight="<p>My Content</p>">Open some DOM in lightbox</a>

This link loads html content from the data-featherlight attribute

Clicking the link will load "My Content".

On Page Load

$.featherlight($('.my-content'), {});

This only loads whats between the <a> tags, "Open some DOM in lightbox".

How to call "My Content" from the data-featherlight attribute on page load?

I need to have the html inside the data-featherlight, not outside in a div.

I thought it might be something like

$('.my-content').featherlight();

$('.my-content').featherlight.current();

Answer 1

Call .featherlight() on your content to ensure that the modal window is configured, and then use jQuery to .click() it right after the page loads:

$('.my-content').featherlight().click()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://noelboss.github.io/featherlight/release/featherlight.min.js"></script>
<a href="#" class="my-content" data-featherlight="<p>My Content</p>">
  Open some DOM in lightbox
</a>