jQuery Thickbox hoặc tương tự để hiển thị iFrame?

Question

Tôi đã xem jQUery thickbox để hiển thị các hộp thoại phương thức có hình ảnh, nó rất tuyệt. Nhưng bây giờ tôi có nhu cầu hiển thị một div nội dung ẩn chứa iFrame theo kiểu tương tự, với liên kết để mở nội dung. Vì vậy, tôi muốn có một cái gì đó như thế này.

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

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

Và cần hiển thị nó trong hộp thoại. Có thể không?

Answer 1

Thickbox hỗ trợ điều đó. Xem bản trình diễn nội dung nội tuyến tại http://jquery.com/demo/thickbox/

Answer 2

Tôi sử dụng jqModal và nó hoạt động độc đáo và nhẹ. Dưới đây là làm thế nào tôi có được nó để làm việc với một iFrame

Đây là html

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

Và đoạn code gọi

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

Tôi có một mở rộng hộp thoại jQueryUI rằng sử dụng một iFrame vì nó là cơ sở xem ... nó điều chỉnh một vài giá trị mặc định (như thêm nút OK/Hủy) nhưng phải là cơ sở phù hợp cho những gì bạn cần. Tôi biết đây là một câu hỏi cũ, nhưng chỉ muốn làm cho mọi người nhận thức được nó.

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

Answer 4

Dưới đây là các chi tiết của sửa chữa của tôi. Hy vọng rằng bạn có thể tích hợp những thay đổi này vào plugin JQuery của bạn. Tôi đang sử dụng jquery 1.4.2 và giao diện người dùng jquery 1.8.2.

Trong jquery-frameddialog.js, tôi đã thay đổi chiều rộng và chiều cao là 100% (không px) và sau đó thay đổi FIX cho jQueryUI 1,7 là sau thay vì:

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