jQuery Thickbox or similar to show iFrame?

Question

I have been looking at jQUery thickbox for showing modal dialogs with images, it is great. But now I have the need to display a hidden div of content that contains an iFrame in a similar fashion, with a link to open the content. So I'd have something like this.

<a href="">Open window in Modal Dialog</a>

<div id="myContent">
    <h1>Look at me!</h1>
    <iframe src="http://www.google.com" />
</div>

And need to show it in the dialog. Is it possible?

Answer 1

Thickbox supports that. See inline content demo at http://jquery.com/demo/thickbox/

Answer 2

I use jqModal and it works nicely and is lightweight. Here is how I get it to work with an iFrame

This is html

<div class="jqmWindow" id="modalDialog">  
    <iframe frameborder="0" id="jqmContent" src=""> 
    </iframe>  
</div>

And the calling code

function showModal(url, height, width)
{    
    var dialog = $('#modalDialog')
        .jqm({ 
            onShow: function(h) {
                var $modal = $(h.w);                
                var $modalContent = $("iframe", $modal); 
                $modalContent.html('').attr('src', url); 
                if (height > 0) $modal.height(height);    
                if (width > 0) $modal.width(width);                
                h.w.show();          
            } 
         }).jqmShow();        
}

function closeModal(postback)
{
    $('#modalDialog').jqmHide();
}

Answer 3

I have an extension to jQueryUI's dialog that uses an iFrame as it's base view... it adjusts a few defaults (like adding an OK/Cancel button) but should be a decent base for what you need. I know this is an old question, but just wanting to make people aware of it.

http://plugins.jquery.com/project/jquery-framedialog

Answer 4

Below are the details of my fix. Hopefully you can integrate these changes into your JQuery plugin. I am using jquery 1.4.2 and jquery UI 1.8.2.

In jquery-frameddialog.js, I changed the width and height to be 100% (not px) and then changed the FIX for jQueryUI 1.7 to be the following instead:

wrap.bind('dragstart', function() { overlay.show(); })
  .bind('dragstop', function() { overlay.hide(); })
  .bind('resizestart', function() { overlay.show(); })
  .bind('resizestop', function() { overlay.hide(); });