Comment utiliser fancybox dialogue plugin pour afficher un div directement

J'ai une fonction javascript appelée confirmer() qui utilise la bibliothèque JQuery UI pour ouvrir les boîtes de dialogue.

Par exemple:

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

Ce ouvre et rend un div avec l'id confirm-popup. Je souhaite passer à la fancybox comme il a un effet élastique que j'ai besoin. J'ai donc été en espérant que le suivant serait de travailler après que j'ai installé fancybox.

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

Ce qui ne fonctionne pas. Aussi loin que je peux voir, vous pouvez seulement appeler les fancybox() fonction sur une balise d'ancrage. Je ne veux pas utiliser les balises d'ancrage, car cela impliquerait beaucoup de changements de code pour moi comme je l'ai déjà mappé ma confirmer la fonction de ces balises.

Idéalement, je voudrais juste saisir l'élément div et de montrer, d'une manière similaire à la jQuery dialogue de l'INTERFACE utilisateur de la méthode? Est-il un moyen de le faire avec Fancybox?

InformationsquelleAutor Brian Connolly | 2010-11-18
  1. 5

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

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

    Vous pouvez utiliser fancybox pour un div, mais ma première question est de savoir si vous avez omis votre # de la carte d'identité? Il serait utile si vous poster le code HTML et où votre fancybox() est appelé aussi, comme il se doit dans le document.prêt. Et vous voulez l'appeler .fancybox() sur ce qui ouvre la boîte de dialogue plutôt que directement sur la boîte de dialogue.

    Dans le cas où vous l'auriez manqué, c'est l'exemple de la fancybox site:

    <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>
    InformationsquelleAutor Jarrett Widman
  3. 1

    Il montre comment utiliser fancybox (1.3.4) sans exiger la <a href> élément de lien en appelant fancybox directement.

    En ligne:

    <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'
    });
});
    InformationsquelleAutor Ronald