How to load external content into a jQuery Dialog.

First the style

<style type="text/css">
    #terms-and-conditions-content{display:none}
</style>

Then the JavaScript

<script type="text/javascript">
    // <![CDATA[
        $(document).ready(function(){ $('#terms-and-conditions').click(function(e){ e.preventDefault();
        var url = $(this).attr('href');
        $('#terms-and-conditions-content').load(url);
        $("#terms-and-conditions-content").dialog({ width:800,modal: true,buttons: { "Close": function() { $(this).dialog("close"); } } }); }); });
    // ]]>
</script>

Then the HTML

    <a id="terms-and-conditions" href="/terms.html">Click Here</a>

Should be straight forward. Just point the link to the file you want to pull into the Dialog box.

Don’t forget that the Dialog is a part of jQuery UI, not just the standard jQuery – you will need to include both.

<script type="text/javascript" src="http<?=$_SERVER['HTTPS']=='on'?'s':''?>://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
    // <![CDATA[
        !window.jQuery && document.write('<script src="/js/jquery-1.6.2.min.js"><\/script>')
    // ]]>
</script>
<script type="text/javascript" src="/js/jquery-ui-1.8.16.custom.min.js"></script>