parent.jQuery.fancybox.close(); từ trong Fancybox chỉ đóng Fancybox một lần

Question

Tôi đang cố gắng đóng một cá thể Fancybox từ liên kết bên trong nội dung Fancybox. Tôi đang sử dụng parent.jQuery.fancybox.close(); như được đề xuất trong this question. Nó hoạt động lần đầu tiên, nhưng sau đó thì không. Bất cứ ai có thể đề nghị một sửa chữa?

Tôi đang lẩn trốn div nội dung của tôi trong trang với điều này:

#content { 
    display: none; 
} 

và đây là liên kết phát động Fancybox, với điều đó div nội dung, trong đó bao gồm các liên kết để đóng Fancybox.

<a href="#" id="launch">Launch</a> 

<div id="content"> 
    <p>Nunc porttitor pellentesque magna a pulvinar. Vestibulum id diam lectus. Praesent vel dictum est.</p> 

    <a href="#" id="close">Close</a> 
</div> 

Và đây là JS của tôi. Tôi đã thử thêm trình xử lý sự kiện vào liên kết đóng mở Fancybox, nhưng nó không giúp ích gì.

$(document).ready(function(){ 
    $('#launch').fancybox({ 
     'width': 300, 
     'content': $('#content'), 
     'onClosed':function() { 
      $("#content").hide(); 
     }, 
     'onStart':function() { 
      $("#content").show(); 
      $('#close').on('click', function(){ 
       //console.log($(this).parent); 
       parent.jQuery.fancybox.close(); 
      }) 
     }, 
     'onCleanup':function() { 
      $("#content").unwrap(); 
     } 
    }); 
}) 

Xin cảm ơn các bạn!

Answer 1

parent.jQuery.fancybox.close(); nên được gọi từ trong phạm vi iframe được mở trong hộp ưa thích. Trong trường hợp của bạn, bạn đang mở inline nội dung để tiền tố parent là không cần thiết. Ngoài ra, bạn phải cung cấp cấu trúc chính xác cho nội dung nội tuyến của mình và gọi hàm đóng từ đó.

Vì vậy, nội dung nội tuyến của bạn sẽ trông như thế

<div style="display: none;"> 
<div id="content"> 
    <p>Nunc porttitor pellentesque magna a pulvinar. Vestibulum id diam lectus. Praesent vel dictum est.</p> 
    <a href="javascript:;" id="close">Close</a> 
</div> 
</div> 

vì những điều trên bạn không cần css này

#content { 
    display: none; 
} 

từ #content đã được bên trong một ẩn div.

sau đó chức năng đóng cửa của bạn có thể được tách ra từ kịch bản Fancybox ... cũng nhận thấy những thay đổi về kịch bản Fancybox dưới đây:

$(document).ready(function(){ 
$('#close').on('click', function(){ 
    //console.log($(this).parent); 
    $.fancybox.close(); 
}); //on 
/* 
// you could also do 
$('#close').click(function(){ 
$.fancybox.close(); 
}); 
*/ 
$('#launch').click(function(){ 
    $.fancybox({ 
    'width': 300, 
    'href': '#content', 
    'onCleanup':function() { 
    $("#content").unwrap(); 
    } 
    });//fancybox 
}); // click 
}); //ready 

này là dành cho Fancybox v1.3.x, phiên bản bạn dường như đang sử dụng. Ngoài ra, bạn nên sử dụng jQuery v1.7.x nếu bạn muốn phương thức .on() hoạt động.

Answer 2

try{ 
     parent.jQuery.fancybox.close(); 
    }catch(err){ 
     parent.$('#fancybox-overlay').hide(); 
     parent.$('#fancybox-wrap').hide(); 
    } 

!!! Not Support onClose !!!