I have a set of DIVs I intend to display inside a fancybox on click. The fancybox successfully fetches the element and its contents; however, when I click the cancel button to close the fancybox or click outside the fancybox so it can disappear, it disappears and abducts the element along with it i.e. removes the element from the DOM entirely. I have tried reading the fancybox plugin to see if I can find why it deletes the element but the unconventional naming conventions of libraries is a limitation. I also cannot find an instance of such issue on the internet. I’m thinking of maybe storing a copy of that element in a variable when the fancybox library is called but I don’t know what method is triggered when the function is exited and as such, to replace the element in its place.
I don’t know if my code will be of any importance here but let me post it anyway
$(document).ready(function() {
$(".new-post a[href*='#fancy']").fancybox({
'hideOnContentClick': false,
});
});
$(".more").click(function() {
$("#fancy_outer").css({"float":"right","position":"static"}); /* loaded element is stuck to the left and I can't center it.*/
var that = $(this), id = $(that).parent().attr("id"); console.log($(that)[0].nodeName);
//use var that inside another object
});
// When I click outside the fancybox, var that disappears entirely