Mostra un div con Fancybox

Con un clic di un pulsante, sto cercando di mostrare un semplice div nascosto in una scatola fantasia. Questo è il codice che funziona :Mostra un div con Fancybox

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

Ma da quello che ho letto, questo non sembra essere il modo standard per ottenere questo risultato. Ho provato ciascuno dei seguenti, senza successo:

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

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

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

Qualcuno mi può punto nella giusta direzione su come utilizzare correttamente questa utilità? Ecco il mio 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>

fonte

2012-03-18 Adam Rackis

Per quanto ne so, un elemento di input non può avere un attributo href. È qui che si pone il problema, perché Fancybox ottiene le informazioni sul contenuto da questo attributo. Il seguente codice funziona perfettamente per me, semplicemente utilizzando un elemento a anziché l'elemento input. Inoltre, questo è ciò che chiamerei il "modo 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"> 
    $("#btnForm").fancybox(); 
</script> 

</body> 
</html>

See it in action on JSBin

fonte

2012-03-18 19:58:43

Hmm - bene +1 perché sembra molto più vicino a quello di cui ho bisogno, ma la fancybox è vuota per qualche motivo. Nessun errore nella console e il codice mi sembra giusto. Esiste un tipo in cui nessuno di noi due sta vedendo? –

ho aggiunto un esempio operativo completo, almeno funziona per me (OSX con Safari e Firefox) –

Questo codice non funziona con Fancybox 1.3, ma l'uso della versione più recente funziona perfettamente. Grazie. –

si potrebbe usare:

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

fonte

2012-03-18 19:36:04 aurbano

Questa è solo una versione più lunga di ciò che ho già avuto.Ho pensato che ci fosse un modo più diretto per ottenere questo, usando la proprietà href config –

Vero, si potrebbe semplicemente usare '$ (" # btnForm "). Click (function() { $ (" # divForm "). Fancybox ( }); – aurbano

Ho già provato anche questo. Questa è una delle versioni che ho provato senza successo. –

soluzione padde si adatta, ma sorto un altro problema cioè

Come detto da Adam (l'interrogante) che è mostra comparsa vuoto. Ecco la completa e la soluzione di

<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>

fonte

2013-05-02 08:44:43 wakqasahmed

La tua risposta è migliore. Voglio solo aggiungere per altri neofiti che su Fancybox 2 i nomi sono cambiati. 'afterLoad': function() {$ ("# divForm"). css ("display", "block"); }, 'afterClose': function() {$ ("# divForm"). Css ("display", "none"); } – borayeris

Grazie per aver segnalato 'onStart' e' onClosed'. Questo dovrebbe essere aggiunto alla risposta selezionata. –

Grazie per l'avvio e la chiusura aggiuntivi. Risolve inizialmente il problema della scatola vuota. –

Io uso approccio con collegamento aggiungendo "Singleton" per l'elemento che si desidera visualizzare in fancybox. Questo è un codice, quello che uso con alcune modifiche minori:

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

spiegazione supplementare: Se si mostra fancybox con l'opzione "contenuto", si duplicherà DOM, che è elementi all'interno. A volte questo non è OK. Nel mio caso avevo bisogno di avere gli stessi elementi, perché erano usati nella forma.

fonte

2014-01-17 18:40:30

Basta usare questo e sarà utile per voi

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

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

});

fonte

2014-05-07 05:15:14

Semplice: per esempio se div id 'mydiv'

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

Ciò rende anche funzionale il codice JS che si trova all'interno div.

fonte

2015-01-19 16:45:21 Azghanvi

La tua soluzione è così semplice :) – l00k

Per gli utenti a tornare a questo post molto tempo dopo la prima risposta è stata accettata, può pagare i notare che ora è possibile utilizzare

data-fancybox-href="#"

su qualsiasi elemento (dal momento che i dati è un attributo HTML-5 accettato) per far funzionare la fancybox su un modulo di input se per qualche motivo non è possibile utilizzare le opzioni da avviare per qualche motivo (ad esempio, si dispone di più elementi nella pagina che utilizzano fancybox e tutti condividono una classe simile che si chiama fancybox sopra).

fonte

2015-04-26 15:48:04 Daemedeor

grazie, funziona perfettamente – OnengLar

Mostra un div con Fancybox

risposta

Problemi correlati