javascript - example - fancybox pdf
Muestra un div con Fancybox (7)
La solución de Padde es correcta, pero plantea otro problema, es decir
Según lo dicho por Adam (el que pregunta) que está mostrando una ventana emergente vacía . Aquí está la solución completa y de trabajo.
<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>
En el clic de un botón, estoy tratando de mostrar un simple div oculto en una caja de fantasía. Este es el código que funciona :
$("#btnForm").fancybox({ content: $("#divForm").html() });
Pero por lo que he leído, esta no parece ser la forma estándar de lograr esto. He intentado cada uno de los siguientes, sin éxito:
$("#btnForm").fancybox({ href: "#divForm" });
$("#btnForm").click(function () {
$.fancybox({ href: "#divForm" });
});
$("#btnForm").click(function () {
$("#divForm").fancybox();
});
¿Alguien me puede indicar la dirección correcta sobre cómo usar correctamente esta utilidad? Aquí está mi 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>
Para los usuarios que vuelven a esta publicación mucho después de que se aceptó la respuesta inicial, puede ser útil saber que ahora puede usar
data-fancybox-href="#"
en cualquier elemento (ya que los datos son un atributo HTML-5 aceptado) para que funcione el fancybox, por ejemplo, un formulario de entrada, si por alguna razón no puede usar las opciones para iniciar por alguna razón (por ejemplo, tiene varios elementos en la página) que usan fancybox y todos comparten una clase similar a la que llaman fancybox).
Podrías usar:
$(''#btnForm'').click(function(){
$.fancybox({
''content'' : $("#divForm").html()
});
};
Que yo sepa, un elemento de entrada puede no tener un atributo href , que es donde Fancybox obtiene su información sobre el contenido. El siguiente código utiliza un elemento a en lugar del elemento de input . Además, esto es lo que yo llamaría la "forma estándar".
<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>
Simple: por ejemplo, si div id ''mydiv''
jQuery.fancybox.open({href: "#mydiv"});
Esto también hace que el código JS sea funcional dentro de div.
Solo usa esto y será útil para ti
$("#btnForm").click(function (){
$.fancybox({
''padding'': 0,
''width'': 1087,
''height'': 610,
''type'': ''iframe'',
content: $(''#divForm'').show();
});
});
Uso el enfoque con el enlace "singleton" adjunto para el elemento que desea mostrar en fancybox. Este es el código, lo que uso con algunas ediciones menores:
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();
}
Explicación adicional: si muestra fancybox con la opción "contenido", duplicará DOM, que está dentro de los elementos. A veces esto no está bien. En mi caso necesitaba tener los mismos elementos, porque se usaban en forma.