2008-10-16 77 views
6

我一直在尋找jQUery thickbox顯示與圖像模態對話框,這是偉大的。但是現在我需要以類似的方式顯示包含iFrame的隱藏的內容,並提供打開內容的鏈接。所以我會有這樣的事情。jQuery Thickbox或類似的顯示iFrame?

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

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

並且需要在對話框中顯示它。可能嗎?

回答

2

我使用jqModal,它工作得很好,而且很輕巧。這是我如何得到它與一個iFrame

這是HTML

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

而且調用代碼

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(); 
} 
0

我有一個擴展jQueryUI的的對話框,使用iframe,因爲它的基本工作查看...它調整了一些默認值(如添加一個確定/取消按鈕),但應該是你需要的一個體面的基礎。我知道這是一個古老的問題,但只是想讓人們意識到這一點。

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

+0

我試過這個插件,它隱藏了x-scrollbar。你能解決這個問題嗎? - [查看我的回答] – 2010-07-22 14:36:38

0

下面是我的修補程序的詳細信息。希望您可以將這些更改集成到您的JQuery插件中。我正在使用jQuery 1.4.2和jQuery UI 1.8.2。

jQuery中-frameddialog.js,我改變寬度和高度爲100%(未PX),然後改變爲FIX 1.7 jQueryUI的是代替以下:

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