web-dev-qa-db-fra.com

Montrez un div avec Fancybox

Sur le clic d'un bouton, j'essaie de montrer un simple div caché dans une boîte de fantaisie. Ceci est le code qui fonctionne:

$("#btnForm").fancybox({ content: $("#divForm").html() });

Mais d'après ce que j'ai lu, cela ne semble pas être le moyen standard d'y parvenir. J'ai essayé chacune des solutions suivantes, sans succès:

$("#btnForm").fancybox({ href: "#divForm" });

$("#btnForm").click(function () {
    $.fancybox({ href: "#divForm" });
});

$("#btnForm").click(function () {
    $("#divForm").fancybox();
});

Quelqu'un peut-il m'orienter dans la bonne direction sur la façon d'utiliser correctement cet utilitaire? Voici mon html:

    <input type="button" value="Load Form" id="btnForm" />

    <div id="divForm" style="display:none">
        <form action="tbd">
            File: <input type="file" /><br /><br />
            <input type="submit" />
        </form>
    </div>
javascriptjqueryfancybox
18
Adam Rackis

Pour autant que je sache, un élément d'entrée peut ne pas avoir d'attribut href, c'est là que Fancybox obtient ses informations sur le contenu. Le code suivant utilise un élément a au lieu de l'élément input. C'est aussi ce que j'appellerais la "voie standard".

<html>
<head>
  <script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.0.5"></script>
  <link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.0.5" media="screen" />
</head>
<body>

<a href="#divForm" id="btnForm">Load Form</a>

<div id="divForm" style="display:none">
  <form action="tbd">
    File: <input type="file" /><br /><br />
    <input type="submit" />
  </form>
</div>

<script type="text/javascript">
  $(function(){
    $("#btnForm").fancybox();
  });
</script>

</body>
</html>

Voir en action sur JSBin

29
Patrick Oscity

la solution de padde est bonne, mais a soulevé un autre problème, c'est-à-dire.

Comme l'a dit Adam (le questionneur), c'est montrant une fenêtre vide. Voici la solution complète et fonctionnelle

<html>
<head>
    <script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.0.5"></script>
    <link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.0.5" media="screen" />
</head>
<body>

<a href="#divForm" id="btnForm">Load Form</a>

<div id="divForm" style="display:none">
    <form action="tbd">
        File: <input type="file" /><br /><br />
        <input type="submit" />
    </form>
</div>

<script type="text/javascript">
$(function() {
    $("#btnForm").fancybox({
        'onStart': function() { $("#divForm").css("display","block"); },            
        'onClosed': function() { $("#divForm").css("display","none"); }
    });
});
</script>

</body>
</html>
11
wakqasahmed

Vous pouvez utiliser:

$('#btnForm').click(function(){
    $.fancybox({
            'content' : $("#divForm").html()
        });
};
6
aurbano

Pour les utilisateurs qui reviennent à ce message longtemps après l'acceptation de la réponse initiale, il peut être intéressant de noter que vous pouvez désormais utiliser

data-fancybox-href="#"

sur n'importe quel élément (puisque les données sont un attribut accepté par HTML-5) pour que la fancybox fonctionne sur, par exemple, un formulaire de saisie si, pour une raison quelconque, vous ne pouvez pas utiliser les options pour l'initier pour une raison quelconque (comme, par exemple, vous avez plusieurs éléments sur la page qui utilisent fancybox et partagent tous une classe similaire sur laquelle vous appelez fancybox).

3
Daemedeor

Simple: par ex. si div id 'mydiv'

jQuery.fancybox.open({href: "#mydiv"});

Cela rend également le code JS fonctionnel qui se trouve à l'intérieur de div.

2
Azghanvi

Vous utilisez simplement cela et cela vous sera utile

$("#btnForm").click(function (){

$.fancybox({
    'padding':  0,
    'width':    1087,
    'height':   610,
    'type':     'iframe',
    content:   $('#divForm').show();
        });

});
1
Syed Amir Bukhari

J'utilise l'approche avec l'ajout d'un lien "singleton" pour l'élément que vous souhaitez afficher dans fancybox. C'est du code, ce que j'utilise avec quelques modifications mineures:

function showElementInPopUp(elementId) {
    var fancyboxAnchorElementId = "fancyboxTriggerFor_" + elementId;
    if ($("#"+fancyboxAnchorElementId).length == 0) {
        $("body").append("<a id='" + fancyboxAnchorElementId + "' href='#" + elementId+ "' style='display:none;'></a>");
        $("#"+fancyboxAnchorElementId).fancybox();
    }

    $("#" + fancyboxAnchorElementId).click();
}

Explication supplémentaire: Si vous affichez fancybox avec l'option "contenu", il dupliquera DOM, qui est à l'intérieur des éléments. Parfois, ce n'est pas OK. Dans mon cas, j'avais besoin d'avoir les mêmes éléments, car ils étaient utilisés dans la forme.

1
Marat Gallyamov