的fancybox不与特定的选择

Question

我用这个代码，但它是不工作的工作...

 $(document).ready(function() { 
      $('#welcomePopup').fancybox();    
     }); 

但另一个代码工作正常，像

$.fancybox({ 
        'padding': 5, 
        'width': 625, 
        'height': 450, 
        'content': $("#welcomePopup").html() 
       }); 

我想用第一种方法因为第二个重复的HTML。

任何线索？

Answer 1

这

$(document).ready(function() { 
    $('#welcomePopup').fancybox();    
}); 

仅结合选择#welcomePopup到的fancybox但它不会打开它。您仍然需要在该选择器上打开click才能打开fancybox。

上面代码中的正常情况是

<a id="welcomePopup" href="{your target content}">open fancybox</a> 

其中#welcomePopup是的fancybox 触发

。另一方面，如果#welcomePopup内容是要显示为的fancybox内容是什么（#welcomePopup是fancybox 目标），那么你需要另一个选择器作为触发器。

此第二种情况下，正常的做法是：

HTML

<a class="fancybox" href="#welcomePopup">open welcome pop up in fancybox</a> 
<div style="display: none;" id="welcomePopup"> 
    <h1>fancybox content</h1> 
    <p>lorem ipsum</p> 
</div> 

jQuery的

$(document).ready(function() { 
    $('.fancybox').fancybox();    
}); 

最后，如果你想打开的fancybox没有触发器和页面加载，那么其中任何一个都可以做到这一点

$.fancybox({ 
    'padding': 5, 
    'width': 625, 
    'height': 450, 
    'href': "#welcomePopup" 
}); 

或

$.fancybox("#welcomePopup",{ 
    'padding': 5, 
    'width': 625, 
    'height': 450 
});