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

Solution 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

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