2

I've started using FeatherLight and have a small problem: I have a simple div. Here is its code:

<div id="AddNewItemToMenu" style="display:none;">....</div>

Basically i can open the lightbox and it is shown perfectly and everything is ok - UNTIL i manually force a close of the lightbox popup via Javascript. After closing it once? - when i try to reload it again, i get an empty lightbox (maybe the close operation erased the div's content).

For the close command i use:

$.featherlight.close();

and for the opening command (opening of the featherlight lightbox) i use the following command:

$.featherlight($('#AddNewItemToMenu'), { 'persist' : true });

Any ideas why that happens?. Maybe there is another methood of hiding instead of closing? (something that won't vanish my div?).

Thank you!.

Updated: I've attached an example file. Uploaded to some temp site. here is the link: https://ufile.io/wxipg When opening index.html => click on the "Open Featherlight" and then close the popup and then click on the "Open Featherlight" again, and you'll see empty div.

Kosem
  • 373
  • 2
  • 11

1 Answers1

1

You should either use featherlight's binding (e.g. $('#open-fl').featherlight(...)), or else use the result of $.featherlight to re-open it, e.g.:

var fl = $.featherlight(...); // Opens dialog a first time
fl.close(); // Closing it via JS
fl.open(); // Opening again
Marc-André Lafortune
  • 78,216
  • 16
  • 166
  • 166
  • i've just replied on a topic you answered on at 2015. took me 2 days to come up with the solution (yours, from 2015). wish the documentation on the featherlight website was clearer :( many thanks my friend – Kosem Apr 25 '18 at 13:25
  • 1
    Please consider making a PR to improve the doc :-) – Marc-André Lafortune Apr 25 '18 at 14:00
  • whatever helps you. I see that you are helping everyone else, and might be the owner. many thanks and you've done a great job with this one. – Kosem Apr 26 '18 at 08:08