How to open DOM Element with Featherlight on Page Load?

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();

Answers 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>


Related Articles