如何隐藏jquery featherlight弹出窗口并手动打开它

我正在使用featherlight插件（）在我的网站上弹出一个窗口。弹出窗口包含HTML-无图像等

我想做的是在有人加载页面时触发弹出窗口

因此，我创建了如下内容：

<div id="myPopup">
    <p>content...</p>
</div>

$(function() {
    $.featherlight('#myPopup');
});

<div id="myPopup" style="display: none;">

就弹出窗口的显示而言，这是有效的。但这也意味着

#myPopup

中的内容在页面中可见

我试着用CSS隐藏它，如下所示：

<div id="myPopup">
    <p>content...</p>
</div>

$(function() {
    $.featherlight('#myPopup');
});

<div id="myPopup" style="display: none;">

这将隐藏页面中的弹出窗口，但意味着当featherlight弹出窗口打开时，它不可见

如何做到这一点，使内容在弹出窗口中可见，但在页面的其余部分隐藏

---

#myPopup

必须位于

标记内，因为否则无法将其引入页面-例如，我不希望有一个使用ajax调用外部页面的解决方案。

Featherlight只需克隆元素以在模式中显示（这就是为什么您不应该在其中任何地方使用ID的原因——我将用一个类替换它），因此您可以通过简单地使model的子树中的克隆再次可见来实现这一点：

<style>
.myPopup { display: none; }
.featherlight-content .myPopup { display: block; }
</style>

<div class="myPopup">
    <p>content...</p>
</div>

<script>
$(function() {
    $.featherlight('.myPopup');
});
</script>

.myPopup{显示：无；}
.featherlight content.myPopup{display:block；}
内容

$（函数（）{
$.featherlight（'.myPopup'）；
});

---

您是否也包括featherlight的css？

是的，我已经正确安装了它。@CBroe不确定这是否是一个讽刺性的评论。这是一个悬赏，因为很明显我无法让它工作。因此，如果您可以发布一个完全工作的示例，那么显然其中可能有值得您使用的内容……太棒了，谢谢。它说我可以我不会在23小时内奖励奖金。但我很高兴，如果可以的话，我也会这样做。