Featherlight - 如何使用 javascript 打开灯箱？

Featherlight - how to open lightbox with javascript?

提问by clovisti

Using Featherlightand JQuery, I have a lightbox :

使用Featherlight和JQuery，我有一个灯箱：

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

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

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

I would like to trigger it in a javascript function :

我想在 javascript 函数中触发它：

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

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

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

我尝试过featherlight.click 或featherlight.open 但它没有用。谢谢你的帮助。

---

---

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 :

第二次编辑：刚刚找到解决方案，因为调用$('lightbox...只设置配置参数。我<a id="f1" ... >通过以下 javascript 函数强制点击链接：

$('f1').click();

$('f1').click();

回答by TPoy

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

Featherlight是这里使用的灯箱插件。无需强制点击。

HTML

HTML

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

JS

JS

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

Demo

演示

回答by alo Malbarez

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

@Jacob Raccuia要打开动态内容灯箱，您仍然需要一个 DOM 占位符。

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>