lỗi fancybox với kích hoạt bấm

Question

Tôi phải chạy fancybox với kích hoạt bấm trong trang web của tôi, vấn đề mà tôi phát hiện ra là với phương pháp này nếu bạn bấm vào các yếu tố bên trong hộp ưa thích, hộp ưa thích sẽ đóng và xuất hiện lại (nhấp nháy).

tôi muốn Fancybox để ngăn chặn nhấp nháy khi tôi bấm vào các yếu tố bên trong hộp và khi tôi click vào những yếu tố tôi không muốn nhìn thấy bất kỳ thay đổi, đó là tất cả :)

tôi tạo ra bản demo cho điều này vấn đề

http://jsfiddle.net/NhWLc/5/

<div id="a1"> 
    <p>Click on the box</p> 
    <div class="r"></div> 
</div> 

$(document).ready(function() { 
    $('#a1').fancybox({ 
    afterClose: function() { 
     console.log('closed :('); 
    } 
    }).click();// or .trigger('click'); 
}); 

bất kỳ ý tưởng?

Answer 1

Vấn đề với mã của bạn là bạn đang làm cho bộ chọn #a1 làm cả hai: các kích hoạt và các mục tiêu của fancybox do đó bất kỳ bấm vào chính nó sẽ cháy fancybox hơn và hơn nữa.

Bạn sẽ cần phải tạo ra một selector (cò) mà mục tiêu là yếu tố #a1 như

<a class="fancybox" href="#a1">triggers fancybox</a> 
<div id="a1"> 
    <p>Click on the box</p> 
    <div class="r"></div> 
</div> 

nếu bạn không muốn phần tử .fancybox được hiển thị, chỉ cần thêm một tài sản display:none

Sau đó, your js

$(document).ready(function() { 
    $('.fancybox').fancybox({ 
     afterClose: function() { 
      console.log('closed :('); 
     } 
    }).trigger('click'); 
}); 

Xem JSFIDDLE

EDIT: xem bạn mẫu JSFIDDLE, mọi thứ có thể đơn giản hơn rất nhiều.

Có chỉ html này

<div id="a1"> 
    <p>Click on the box</p> 
    <div class="r"></div> 
</div> 

bạn có thể sử dụng mã này

$(document).ready(function() { 
    $.fancybox({ 
     href: "#a1" 
    }); 
}); 

nơi không click là cần thiết.

Hẹn gặp lại được cập nhật JSFIDDLE

Answer 2

Sử dụng dưới đây html, thêm id-<div> và <a class="fancybox" rel="group" href="#r"><div id="r" class="r"></div></a>

<div id="a1"> 
    <p>Click on colors</p> 
    <a class="fancybox" rel="group" href="#r"><div id="r" class="r"></div></a> 
    <a class="fancybox" rel="group" href="#g"><div id="g" class="g"></div></a> 
    <a class="fancybox" rel="group" href="#b"><div id="b" class="b"></div></a> 
</div> 

check here

---------------------- cập nhật ----------------

thêm afterShow() để jquery bạn

$('#a1').fancybox({ 
    afterClose: function() 
      { 
      console.log('closed :('); 
      }, 
      afterShow:function() 
      { 
       $('#a1').click(function(){return false;}); 
      } 

     }).click(); 

Check again

Answer 3

tôi không biết nó sẽ rất hữu ích hay không chỉ cần cố gắng này,

$(document).ready(function(e) 
{ 
e.preventDefault(); 
      $('#a1').fancybox({ 
       afterClose: function() 
       { 
        console.log('closed :('); 
       } 
      }).click();// or .trigger('click'); 

}); 

Answer 4

tôi đã có triệu chứng tương tự của lớp phủ Fancybox nhấp vào được. Khách hàng của tôi muốn có thể liên kết và tự động mở một Hộp thư ưa thích nhất định, như http://yoursite.com/#signup để mở lớp phủ Fancybox 'đăng ký' nội tuyến. Nhờ JFK tôi nhận ra rằng tôi đã kích hoạt và nhắm mục tiêu phần tử có ID 'đăng ký' thay vì phần tử có thuộc tính href của '#signup'. Tôi đã nhận nó để nối vào phần cuối cùng của URL (ví dụ: #signup) và tìm kiếm thuộc tính 'a' href phù hợp và kích hoạt nhấp chuột vào phần tử đó.

Bản trình diễn bên dưới không thực sự giúp khắc họa điều này, nhưng bạn sẽ thấy mã.

http://jsfiddle.net/ca7no4yp/2/

Bit ngon ngọt:

$("a[href='#" + location.href.substr(location.href.indexOf('#')+1) + "']").fancybox().trigger('click');