jQuery dialog from external content

October 25th, 2011 AfterDarkMike

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>

Posted in jQuery Tags: JavaScript, jQuery, jQuery UI

« How to use find and mv How to use find and mv/

Finding the top 10 directories using disk space. »

You can leave a response, or trackback from your own site.

8 Responses to “jQuery dialog from external content”

1. decolink says:

   October 25, 2011 at 10:43 am

   This is the best post on this topic i have ever read.I am really very impressed with the blogging

   Reply
2. John says:

   November 10, 2011 at 4:10 am

   Hello there, just became aware of your blog through Google, and found that it’s really informative. I’m gonna watch out for brussels. I’ll appreciate if you continue this in future. A lot of people will be benefited from your writing. Cheers!

   Reply
3. Christy says:

   December 2, 2011 at 1:59 am

   Thanks for this great blog!

   Reply
4. Dockstader says:

   January 22, 2012 at 3:55 pm

   I discovered exactly what I was taking a look for. You’ve ended my 4 day long hunt! God Bless you man. Have a great day. Bye

   Reply
5. Anonymous says:

   January 24, 2012 at 9:24 am

   [...]jQuery dialog from external content | Mike Johnson’s Personal Blog[...]…

   Reply
6. Burt says:

   January 30, 2012 at 7:22 pm

   Do you mind if I quote a few of your posts as long as I provide credit and sources back to your website? My blog is in the very same area of interest as yours and my users would genuinely benefit from some of the information you present here.

   Reply
7. AfterDarkMike says:

   January 30, 2012 at 9:08 pm

   Go to town

   Reply
8. Yung says:

   January 31, 2012 at 3:54 am

   Awsome blog! I

   Reply