jQuery Thickbox lub podobny, aby wyświetlić element iFrame?

Question

Szukałem jQUery thickbox do wyświetlania modalnych okien dialogowych ze zdjęciami, jest świetnie. Ale teraz mam potrzebę wyświetlania ukrytego elementu div zawierającego element iFrame w podobny sposób, z odsyłaczem do otwierania treści. Więc miałbym coś takiego.

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

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

I trzeba pokazać to w oknie dialogowym. Czy to możliwe?

Answer 1

Thickbox obsługuje to. Zobacz demonstrację zawartości w trybie liniowym pod adresem http://jquery.com/demo/thickbox/

Answer 2

Używam jqModal i działa ładnie i jest lekki. Oto w jaki sposób zmusić go do pracy z iFrame

To html

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

a kod wywołujący

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

Mam rozszerzenie dialogu jQueryUI za który używa iFrame jak to podstawa view ... dostosowuje kilka wartości domyślnych (np. przycisk OK/Cancel), ale powinien być przyzwoitą bazą dla tego, czego potrzebujesz. Wiem, że to stare pytanie, ale po prostu chcę uświadomić to ludziom.

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

Answer 4

Poniżej znajdują się szczegóły dotyczące mojej poprawki. Mam nadzieję, że możesz zintegrować te zmiany z wtyczką JQuery. Używam jquery 1.4.2 i jquery UI 1.8.2.

W jQuery frameddialog.js, zmieniłem szerokość i wysokość, aby być w 100% (nie px), a następnie zmienił FIX dla jQueryUI 1,7 być następujące zamiast:

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