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

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 trigger开发者_如何转开发ed? Thanks for the help.

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;
     })

}

Try this and see if it works for you

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

   $('#content').load('load.htm', function (content) {
      $('#content').dialog({
         resizable: false,
         height: 300,
         width: 500,
         dialogClass: 'noTitle',
         modal: true
      });
      $('#content').dialog('show');
   });

});

Load.htm

<script type="text/javascript">

$(function () {

    alert('loaded');

});

</script>

<div>
    Content
</div>

Page

<a id="load" href="#">Load</a>
<div id="content" style="display:none"></div>

If the links are dynamic then replace the $('#load').click with

$('body').delegate('#load', 'click', function () { ..... }