45

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?

Salman A
  • 262,204
  • 82
  • 430
  • 521

3 Answers3

65

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

Community
  • 1
  • 1
Salman A
  • 262,204
  • 82
  • 430
  • 521
  • Awesome stuff, thanks for posting the code. This allowed be to add my java applet to a modal dialog! – Tom May 01 '13 at 15:14
  • 1
    This is what I call a precise, well implemented and even better explained answer. Awesome. – arkascha May 05 '13 at 20:43
  • Very nice work. This example is almost extactly what I needed and provides solutions to overcome the issues involved in this type of dialog.ui implementation. – James Hull Jul 03 '13 at 07:40
  • @SalmanA I apologize, I didn't correctly include the jquery-ui theme when I did this. It does work correctly. – dessalines Jan 23 '15 at 20:40
  • thanks much for this answer, one issue I am facing is whenever I close the iframe the resource allocated for this is not getting released. I see the document window as detached Html document. Can you please advise if any way to fix this ? – Vishnu Sep 07 '18 at 21:46
  • @Vishnu try loading `about:blank` page in the iframe when you want to throw away the document. – Salman A Sep 08 '18 at 08:36
  • Excellent answer, although after making it resizable by changing resizable from false to true, the iframe doesn't resize with the div. Is there any way to match the iframe size with the div size? – Raymond Apr 12 '19 at 00:08
50

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.

omerkirk
  • 2,527
  • 1
  • 17
  • 9
  • For (i) what happens if I close the dialog then open another link. My concern is that the link are html pages containing videos. If closing the dialog simply means that the iframe is hidden but present in DOM, the video will continue to play (and make noise) and eat up browser resources. – Salman A Apr 14 '11 at 08:26
  • 1
    For (ii) yes it is a HTML page containing either flash or youtube embedded video, which itself is a flash. Need to check myself. Does the same-origin-policy matter in this case? – Salman A Apr 14 '11 at 08:27
  • 2
    The same origin policy matters in the second case, so I would go with the first approach. There is an onclose event for the ui dialog. So anything you need remove from the dom, or any handling you need to do with the loaded content you can do there (ex: $("#iframe-id").remove()). – omerkirk Apr 14 '11 at 08:44
  • The second option is mostly used for your own content that can be requested from the same domain using ajax, not very feasible in your case. – omerkirk Apr 14 '11 at 08:45
  • @omerkirk: thanks, I am checking out the first approach; infact, got pretty close by hooking into the close event. – Salman A Apr 14 '11 at 09:10
  • 'append' can't be me first choise, think about opening the same dialog at least twice. I recomment use of 'html', or 'innerhtml' instead – Decebal Apr 04 '13 at 11:49
0

Although this is a old post, I have spent 3 hours to fix my issue and I think this might help someone in future.

Here is my jquery-dialog hack to show html content inside an <iframe> :

let modalProperties = {autoOpen: true, width: 900, height: 600, modal: true, title: 'Modal Title'};
let modalHtmlContent = '<div>My Content First div</div><div>My Content Second div</div>';

// create wrapper iframe
let wrapperIframe = $('<iframe src="" frameborder="0" style="width:100%; height:100%;"></iframe>');

// create jquery dialog by a 'div' with 'iframe' appended
$("<div></div>").append(wrapperIframe).dialog(modalProperties);

// insert html content to iframe 'body'
let wrapperIframeDocument = wrapperIframe[0].contentDocument;
let wrapperIframeBody = $('body', wrapperIframeDocument);
wrapperIframeBody.html(modalHtmlContent);

jsfiddle demo

mmuzahid
  • 2,252
  • 23
  • 42