Question

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

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

而不是使用我不需要的链接，将其打开为：

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

我想在javascript函数中触发它：

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

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

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

$（＆＃39; F1＆＃39）。单击（）;

Answer 1

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

HTML

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

JS

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

Demo

Answer 2

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

Featherlight - 如何用javascript打开灯箱？

2 个答案:

HTML

JS