FancyBox onload show funktioniert nicht mit normalem Klick

Question

Ich entwickle ein kleines JavaScript-Spiel. Wenn die Seite lädt, soll es eine Fancybox über die Seite anzeigen.

Hier ist mein jQuery für die Fancybox:

$(document).ready(function() { 
$('#test').fancybox({ 
'transitionIn' : 'elastic',
'transitionOut' : 'elastic', 
'showCloseButton' : false,
'overlayOpacity' : 1
}).click();
});

Hier ist mein HTML:

<a id="test" href="#test2" style="display:none;">Test the Popup</a>
<div style="display:none;">
<div id="test2"  style='padding:10px; background:#fff;width:550px;'>
<b style="color:#FF9C21;font-size:24px;">HTML Jeoprady</b><br>
<span style="font-size:15px;">
You think your good at HTML? Well test your skill here.<br>
Please know there is more to HTML than 2 tags ;)<br>
Are you ready?<br><br>
<b style="color:#FF9C21;font-size:24px;">Name:</b>
<input type="text" id="team1" />
</span>
<br><br>
<span id="start" onclick="loop();" style="cursor:pointer;color:#FF9C21;font-size:20px;"> 

<center>Start Game!</center></span>
</div>
</div>

Alle meine FancyBoxen, die bei einem Klick aktiviert werden, werden angezeigt, aber dann werden sie etwa 5 Sekunden nach dem Öffnen automatisch geschlossen.

Gibt es eine Möglichkeit, dies zu beheben?

Answer 1

Anstelle von .click() sollten Sie wahrscheinlich einfach .open() verwenden.

Bearbeiten: Ich Dummerchen, es gibt kein .open(). Ich hatte schon früher Probleme mit dem Auslösen von programmatischen Klick-Ereignissen. Wenn die Methode, die Sie versuchen, Probleme verursacht, versuchen Sie dies

$('#test').trigger('click')

oder verwenden Sie alternativ einen manuellen Aufruf

$.fancybox('html content here',{options})

Answer 2

Wenn Sie einen manuellen Anruf tätigen, können Sie das tun:

var theContent = $('#div-id').html();

$.fancybox(theContent, {
'transitionIn' : 'elastic',
'transitionOut' : 'elastic', 
'showCloseButton' : false,
'overlayOpacity' : 1
});

Und dann, der Inhalt von #div-id wäre im manuellen Aufruf enthalten.

Ich hoffe, das hilft.