javascript - 花式框单击不打开，需要双击

Question

嗨，我想在 fancybox 中打开某个 div我喜欢这个

<script>
$('a#img_main_squre').click(function(e){        
  $.fancybox(this,{
    href: '#first_lightbox', 
    modal: true
   });
      e.preventDefault();   
});

</script>

<div style="display:none">
 <div id = "first_lightbox">  
   <div id = "lightbox_image">
     <img src="{{ settings.content_module_img1 | img_url: "medium" }}" />
   </div>
   <div id= "lightbox_content">        

     <img src="{{ settings.content_module_image1_logo | img_url: "small" }}" />
     <span>{{ settings.first_headline }}</span>
     <span>{{ settings.second_headline }}</span>         

   </div>  
 </div>

<div class="product-single__photo-wrapper" >
  <a href="first_lightbox" id="img_main_squre">
    <img src="{{ settings.content_module_img1 | img_url: "small" }}" />
  </a>  
</div> 

我已经尝试了 SO 上几乎所有可能的解决方案，但没有一个有效我正在使用 jQuery 1.11.8和 fancybox -v 2.1.5

我想在点击#img_main_squre 时在 fancybox 中显示隐藏的 div 'first_lightbox'

Answer 1

你需要在click之外初始化它.因为首先 click事件正在初始化并在第二个click它适合你。

<script>
    $(document).ready(function(){ 
       //initialize outside click
       $('a#img_main_squre').fancybox({
          modal: true
       });
    });
</script>

在您处理 modal 时您需要基于机制 target使用 # 约定的模态像建议的那样，不需要放 href在花哨的盒子里。

 <a href="#first_lightbox" id="img_main_squre">