Featherlight - how to open lightbox with javascript?

Question

Using Featherlight and JQuery , I have a lightbox :

  <div class="lightbox" id="mylightbox"> Text to display in box </div> 

Instead of using a link, that I do not need, to open it as :

  <a href="#" data-featherlight="#mylightbox">Open element in lightbox</a> 

I would like to trigger it in a javascript function :

  $('lightbox.mylightbox').featherlight({ }); 

I tried with featherlight.click or featherlight.open but it did not work. Thxs for your help.

---

2nd Edit : Just found the solution as calling $('lightbox... only sets configuration parameters. I made a forced click on the <a id="f1" ... > link through the following javascript function :

$('f1').click();

Answer 1

Featherlight is the lightbox plugin used here. No need to force a click.

HTML

<div id="mylightbox">Text to display in box</div>

JS

$.featherlight($('#mylightbox'), {});

Demo

Answer 2

@Jacob Raccuia to open a dynamic content lightbox you still need a DOM placeholder.

 jQuery(document).ready(function() { jQuery('#countit').on('click', function() { $popup = jQuery('#mylightbox'); $count = '<div class=numbers>'; for (var n = 0; n < 100; n++) { $count += `<span>${n}</span> `; } $count += '</div>'; $popup.html($count); jQuery.featherlight($popup, {}); }); jQuery('#getit').on('click', function() { fetch('https://baconipsum.com/api/?type=all-meat&paras=2&start-with-lorem=1') .then(function(response) { return response.text(); }) .then(function(body) { $popup = jQuery('#mylightbox'); $popup.html(body); jQuery.featherlight($popup, {}); }); }); }); 

 #mylightbox { display: none; } #mylightbox.featherlight-inner { display: block; } .numbers { width: 220px; } .numbers span { background: #fe0; border-radius: 50%; padding: 2px; margin: 2px; display: inline-block; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="//cdn.rawgit.com/noelboss/featherlight/1.7.13/release/featherlight.min.css" type="text/css" rel="stylesheet" /> <script src="//cdn.rawgit.com/noelboss/featherlight/1.7.13/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script> <div id="mylightbox"></div> <button id=getit>Get Bacon</button> <button id=countit>Count to 100</button>