CODEWITHSUNDEEP
jqueryhtmlcss
Andy
Andy

Reputation: 5395

How to keep jquery featherlight popup hidden and manually open it

I'm using the featherlight plugin (https://github.com/noelboss/featherlight) for a pop-up on my website. The pop-up contains HTML - no images, etc.

What I want to do is trigger the pop-up when someone loads the page.

So I created my content like this:

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

And I trigger it on page load like this:

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

This works, in terms of making the pop-up appear. But it also means that the content inside #myPopup is visible within the page.

I tried hiding it with CSS like this:

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

This hides the pop-up within the page, but means it's not visible when the featherlight pop-up opens.

How is it possible to do this so that the content is visible inside the pop-up, but hidden on the rest of the page?

#myPopup has to be within the <body> tag, because otherwise there's no way to bring it into the page - I don't want a solution which uses ajax to call an external page, for example.

Upvotes: 1

Views: 1044

Answers (1)

C3roe
C3roe

Reputation: 96397

Featherlight simply clones the element to display inside the modal (which is why you should rather not be using IDs anywhere inside there - I'll replace it with a class), so you can get this to work by simply making the clone inside the modal's sub-tree visible again:

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

Upvotes: 1

Related Questions