Example of JQuery UI Dialog With Dynamically Loading an URL with an IFRAME

The jQuery UI dialog is easy to get started with but has a few areas that causes new users some trouble. One of the most commonly asked questions on the jquery-ui list is “how to load iframe (other webpage) in dialog?” In this article I’ll explain how to load Dynamically URL with an IFRAME in Query UI Dialog.

Demo

Demo

First, we create link to page which we want to open into dialog.

<a id="pop" href="http://www.ashishblog.com" title="Ashish Blog" >AshishBlog</a>

Now, we create dialog on link’s click event and get link href and title to diaplay in dialog.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery UI Dialog Demo - Ashish's Blog</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.ui/1.8.6/jquery-ui.min.js"></script>
    <link type="text/css" rel="Stylesheet" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.6/themes/smoothness/jquery-ui.css">
    <script type="text/javascript">
        $(document).ready(function () {
            $('a#pop').live('click', function (e) {
                e.preventDefault();
                var page = $(this).attr("href")
                var pagetitle = $(this).attr("title")
                var $dialog = $('<div></div>')
                .html('<iframe style="border: 0px; " src="' + page + '" width="100%" height="100%"></iframe>')
                .dialog({
                    autoOpen: false,
                    modal: true,
                    height: 625,
                    width: 500,
                    title: pagetitle
                });
                $dialog.dialog('open');
            });
        });
    </script>
    </head>
    <body>
     <a id="pop" href="http://www.ashishblog.com" title="Ashish Blog">AshishBlog</a>
    </body>
    </html> 

Thanks.

search terms:





14 thoughts on “Example of JQuery UI Dialog With Dynamically Loading an URL with an IFRAME

  1. thanks for that

  2. straight up jedi. Is there a way to include buttons with functionality within the dialog.. seems to kick a function not found error.

  3. Thanks a lot for this post.

  4. I was doing something like this, the issue I am getting is (and I also found on your demo page) is:

    If any link is clicked in the pop-up page, it opens the resulting page within pop-up itself. What I am looking for is to have the links in the pop-up page (i.e. in iFrame dialog) to open in the main window? any idea?

  5. sorry, my bad
    somehow I was thinking target=_parent won’t work , then it suddenly clicked me that iframe is added to the main page’s body, so it should work! and it did :)

  6. question , how do i get it to load into a div automatically , instead of using an click or href?
    basicly i want to stick 3 divs on the screen , and when the page comes up , the urls have automatically been loaded

  7. Gaurav Parashar

    Hi, I was trying to use the tutorial and code as you have provided. It does not function correctly on my localhost run.
    1. Should the url being loaded belong to the same domain? (I am trying to load google.com, does not work)
    2. I tried running it on W3 Schools Tryit Editor and it does not load your blog correctly. (http://www.w3schools.com/js/tryit.asp?filename=tryjs_write) Any reasons?

  8. Great! It works, it’s simple (there are plenty of more complicated examples out there). Thank you for posting.

  9. This great. However seems it does not allow to load sites other than the domain parent page is originated. (cross domain)

  10. […] to open the links from an RSS feed into a dialog. I am trying the following code which I got from here. The link does not open dialog. Any suggestions what I ‘m doing wrong. […]

  11. thank you for this grate example, but there are something missing; where is the callback delegate function,

    by the way , an error returns from the script after the fnuction raised ” Invalid calling object”

  12. Thanks a lot for this post.

  13. Thanks for that post.
    Please show a preloader gif image in dialog window before load iframe source page.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>