Comment utiliser le plugin de dialogue fancybox pour afficher un div directement

Question

J'ai une fonction javascript appelée confirm() qui utilise la bibliothèque JQuery UI pour ouvrir les dialogues.

Par exemple:

jQuery('#confirm-popup').dialog('open'); 

Cela ouvre et rend un div id avec confirm-popup. Je voudrais passer à fancybox car il a un effet élastique dont j'ai besoin. Donc j'espérais que ce qui suit fonctionnerait après avoir installé fancybox.

jQuery('confirm-popup').fancybox(); 

Cela ne semble pas fonctionner. Autant que je peux voir, vous pouvez seulement appeler la fonction fancybox() sur une balise d'ancrage. Je ne veux pas utiliser de balises d'ancrage, car cela impliquerait beaucoup de changements de code pour moi car j'ai déjà mappé ma fonction de confirmation à ces balises.

Idéalement, je voudrais simplement saisir l'élément div et le montrer de la même manière que la méthode de dialogue jQuery UI? Existe-t-il un moyen de le faire avec Fancybox?

Answer 1

Vous pouvez utiliser fancybox pour un div, mais ma première question est de savoir si vous avez omis votre # pour l'ID? Il serait utile que vous postiez le code HTML et que votre fancybox() soit appelé, comme il se doit dans document.ready. Et vous voudrez appeler .fancybox() sur ce qui ouvre la boîte de dialogue au lieu de directement sur la boîte de dialogue.

Si vous l'avez manqué, voici l'exemple du site fancybox:

<script> 
    $(document).ready(function() { 
     $("#inline").fancybox(); 
    }); 
</script> 
<a id="inline" href="#data">This shows content of element who has id="data"</a> 
<div style="display:none"><div id="data">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div> 

Answer 2

Si vous souhaitez utiliser FancyBox comme une boîte de dialogue, vous pouvez l'appeler directement en tant que tel:

$.fancybox({ 
    'width'    : '60%', 
    'height'    : '65%', 
    'autoScale'   : true, 
    'hideOnContentClick' : false, 
    'href'    : someUrl, 
    'callbackOnShow'  : function(){ ... }, 
    'onClosed'   : function(){...},      
    'type'    : 'iframe' 
}); 

Answer 3

Ceci montre comment utiliser fancybox (1.3.4) sans nécessiter l'élément de lien <a href> en appelant directement fancybox.

Inline:

<div style="display:none;"> 
    <div id="confirm-popup"> 
     dialog content 
    </div> 
</div> 

$('#myform').submit(function() { 
    $.fancybox({ 
     type: 'inline', 
     content: '#confirm-popup' 
    }); 
}); 

Iframe:

$('#myform').submit(function() { 
    $.fancybox({ 
     type: 'iframe', 
     href: 'http://www.abc123.com' 
    }); 
});