How to open a DOM element with Featherlight when a page loads?

Question

I'm having trouble getting the Featherlight modal window to display content on the page.

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

https://jsfiddle.net/axxdy4we/

Open DOM with a link

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

This link loads the html content from the attribute data-featherlight

By clicking on the link, you will download “My Content”.

Page loading

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

This only downloads tags <a>, Open some DOM in lightbox".

How to call "My content" from an attribute data-featherlightwhen loading a page?

I need to have html inside data-featherlightand not outside in a div.

I thought it could be something like

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

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

Answer 1

.featherlight() , , , jQuery .click() :

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

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

Hide result