How do you open a URL in a dialog box JQUERY UI

Question

I\'ve been looking for a simple solution for quite some time. I want a page (for example http://www.google.com) to be displayed in a JQuery UI Dialog window. The plan is to

Answer 1

You don't need an iframe as has been suggested, but you should read the documentation on dialogs here.

Instead, you need to load the content on the .open property --

$( "#openwindow" ).dialog({
 open: function(event, ui) {
   $('#divInDialog').load('test.html', function() {
     alert('Load was performed.');
   });
  }
});

Also, you seem to use .each with an id -- the id is supposed to be unique within the page. use class instead.

Answer 2

This might help.. Here what i am doing is i am hovering on a link and the url is opening in a dialog box.. You should use class instead of id if multiple same tags are getting created dynamically..ohterwise it will work for only single id.

$('.openwindow').click(function(){
var $this=$(this);
         $.ajax({
                url: $this.attr('href');//You got the link here
                success: function(data) {
                    //show the dialog here..
                    //"data" contains the html returned by the url
                },
                error: function(jqXHR){
                    //Do something here
                }
              });
        });

Answer 3

You may try this

$(function(){
    $('a').on('click', function(e){
        e.preventDefault();
        $('<div/>', {'class':'myDlgClass', 'id':'link-'+($(this).index()+1)})
        .load($(this).attr('href')).appendTo('body').dialog();
    });
});

Above code will create a new dialog on clicking on any link on your page and also add a class name myDlgClass and an unique id for each dialog like link-1, link-2 and so on, but remember that only page link will be loaded not external link because of same origin policy.

Update :

To use an external site link you can use an iframe, here is an example using iframe.

Answer 4

You can use iframe:

 $("#iframeId").attr("src", $(this).attr("href"));
 $('#dialogId').dialog('open');

<div id="divId" >
    <IFRAME id="iframeId"  SRC="" width="" height = "" >
</div>