gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 15:18:03 24 4
gpt4 key购买 nike

我在我的网站上使用 featherlight 插件 ( https://github.com/noelboss/featherlight ) 作为弹出窗口。弹出窗口包含 HTML - 没有图像等。

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

所以我创建了这样的内容:

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

然后我像这样在页面加载时触发它:

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

就使弹出窗口出现而言,这是可行的。但也意味着#myPopup里面的内容在页面中可见。

我试过像这样用 CSS 隐藏它:

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

这会在页面中隐藏弹出窗口,但这意味着当 featherlight 弹出窗口打开时它是不可见的。

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

#myPopup必须在 <body> 内标记,因为否则无法将其引入页面 - 例如,我不想要使用 ajax 调用外部页面的解决方案。

最佳答案

Featherlight 简单地克隆元素以显示在模式中(这就是为什么你不应该在其中的任何地方使用 ID - 我将用一个类替换它),所以你可以通过简单地制作克隆来实现它在模态的子树中再次可见:

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

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

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

https://jsfiddle.net/12zr882q/

关于jquery - 如何隐藏 jquery featherlight 弹出窗口并手动打开它,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46727224/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com