Jquery – How to load an entire html file as a pop up using ui-dialog in jquery

jqueryjquery-ui-dialogpopup

I want to load an html file as a pop up window (like a lightbox) using ui-dialog. I tried the following code, but the js functions inside the loaded html page do not get triggerred. I only get the page content and the images.

$('#lightbox_link').click(function(){   

     $('#lightbox_popup').load('new_lightbox.html').dialog({
                                            resizable: false,   
                                                height:650,
                                                width:980,
                                                dialogClass:'noTitle',      
                                                modal: true
                                }); 
    });
 });

Also I need to know, if ui-dialog would support if the html link is created dynamically? Now I have given a static link. But suppose the link is genereated and returned by the server, then would the page be loaded as a pop up with all the js functions in my page being triggered? Thanks for the help.

Best Solution

If you want to reuse same dialog box on page for number of links try this

Html:

<a class="load" href="link_1.htm">Load</a>
<a class="load" href="link_2.htm">Load</a>
<div id="content">
<div id="content-holder"></div>
</div>

Javascript:

$(document)ready(function(){
    $('#content').dialog({
             resizable: false,
             height: 300,
             width: 500,
             dialogClass: 'noTitle',
             modal: true
          });
     $('#load').click(function (){
         $("#content-holder").load($(this).attr("href"));
         $("#content").dialog('open');
         return false;
     })

}