Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery Thickbox or similar to show iFrame?

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?

like image 695
Mitchel Sellers Avatar asked Oct 16 '08 23:10

Mitchel Sellers


2 Answers

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

like image 166
John Sheehan Avatar answered Nov 16 '22 21:11

John Sheehan


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();
}
like image 33
Craig Avatar answered Nov 16 '22 21:11

Craig