Jquery pop-up using fancybox

Question

I've a button clicking on which it shows a pop-up message. Code is given below:

<a id="report_button_id" href="#report_form_container" class="form_show_link" style="text-decoration: none; cursor: hand">
    <span id="report_button_text_id" class="top_nav_report_button">My Link Here</span>
</a>

<div style="display:none;">
   <div id="report_form_container" class="popup_container">
       // Some page is displayed here using div tags
   </div>
</div>

In Javascript file:

$("a.form_show_link").fancybox({
    centerOnScroll:true,
    overlayOpacity:0.7,
    overlayColor:'#000000',
    showCloseButton:false,
    hideOnOverlayClick:false,
    onStart:resetPopupFormErrors
});


$("#report_form").keypress(function(e) {
    if(e.which == 13){
        $("#report_form").submit();
    }
});

Can any one explain how the above code is displaying pop-up windows on clicking button especially when the style is none????

Thanks!

Answer 1

If I understand your question ('how does this work?'), it is prett simple... Fancybox is moving the target div out of its old container and into a temporary one that it controls. As such, its parent containers no longer have influence on the target (such as 'display:none').