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?

Improve this question
1
  • It would be awesome to look at the final code that worked for you. Thanks so much. Commented Mar 16, 2013 at 14:29

3 Answers 3

Reset to default
66

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

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

Awesome stuff, thanks for posting the code. This allowed be to add my java applet to a modal dialog!
This is what I call a precise, well implemented and even better explained answer. Awesome.
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.
@SalmanA I apologize, I didn't correctly include the jquery-ui theme when I did this. It does work correctly.
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 ?
|
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.

Improve this answer

6 Comments

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.
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?
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()).
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: thanks, I am checking out the first approach; infact, got pretty close by hooking into the close event.
|
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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.