How to display an IFRAME inside a jQuery UI dialog

Question

The web application that I am upgrading uses jQuery and jQuery UI. I have replaced most instances of window.open and <a target=_blank> with jQuery UI dialog. For example, the terms and conditions used to open in a new window; now I use jQuery UI dialog with AJAX. For consistency I plan to use it wherever possible.

One such place is a page where I'll have external links to videos. Something like:

<a href="http://website.com/videos/1.html" target="_blank"><img src="http://website.com/videos/1.png"></a> <a href="http://website.com/videos/2.html" target="_blank"><img src="http://website.com/videos/2.png"></a> 

In certain situations I might use target=iframe1. Now instead of opening the content in an iframe or a popup window, I want to display the content inside a popup dialog. How can I use jQuery UI dialog to achieve this? Will there be any gotchas?

Answer 1

The problems were:

1. iframe content comes from another domain
2. iframe dimensions need to be adjusted for each video

The solution based on omerkirk's answer involves:

• Creating an iframe element
• Creating a dialog with autoOpen: false, width: "auto", height: "auto"
• Specifying iframe source, width and height before opening the dialog

Here is a rough outline of code:

HTML

<div class="thumb">     <a href="http://jsfiddle.net/yBNVr/show/"   data-title="Std 4:3 ratio video" data-width="512" data-height="384"><img src="http://dummyimage.com/120x90/000/f00&text=Std+4-3+ratio+video" /></a></li>     <a href="http://jsfiddle.net/yBNVr/1/show/" data-title="HD 16:9 ratio video" data-width="512" data-height="288"><img src="http://dummyimage.com/120x90/000/f00&text=HD+16-9+ratio+video" /></a></li> </div> 

jQuery

$(function () {     var iframe = $('<iframe frameborder="0" marginwidth="0" marginheight="0" allowfullscreen></iframe>');     var dialog = $("<div></div>").append(iframe).appendTo("body").dialog({         autoOpen: false,         modal: true,         resizable: false,         width: "auto",         height: "auto",         close: function () {             iframe.attr("src", "");         }     });     $(".thumb a").on("click", function (e) {         e.preventDefault();         var src = $(this).attr("href");         var title = $(this).attr("data-title");         var width = $(this).attr("data-width");         var height = $(this).attr("data-height");         iframe.attr({             width: +width,             height: +height,             src: src         });         dialog.dialog("option", "title", title).dialog("open");     }); }); 

Demo here and code here. And another example along similar lines

Answer 2

There are multiple ways you can do this but I am not sure which one is the best practice. The first approach is you can append an iFrame in the dialog container on the fly with your given link:

$("#dialog").append($("<iframe />").attr("src", "your link")).dialog({dialogoptions}); 

Another would be to load the content of your external link into the dialog container using ajax.

$("#dialog").load("yourajaxhandleraddress.htm").dialog({dialogoptions}); 

Both works fine but depends on the external content.