的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 
});