Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Show a div with Fancybox

On the click of a button, I'm trying to show a simple hidden div in a fancy box. This is the code that works:

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

But from what I've read, this doesn't seem to be the standard way to accomplish this. I've tried each of the following, unsuccessfully:

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

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

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

Can someone point me in the right direction on how to properly use this utility? Here's my 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>
like image 724
Adam Rackis Avatar asked Mar 18 '12 19:03

Adam Rackis


People also ask

How do I open Fancybox on button click?

on('click', function() { $. fancybox(); }); });

What is Fancybox in HTML?

fancybox is designed to display images, video, iframes and any HTML content. For your convenience, there is a built in support for inline content and ajax. Images.

What is Fancybox in Javascript?

Fancybox saves you time and helps to easily create beautiful, modern overlay windows containing images, iframes, videos or any kind of HTML content. This is the 4th generation of Fancybox and brings lots of fresh features.


2 Answers

As far as I know, an input element may not have a href attribute, which is where Fancybox gets its information about the content. The following code uses an a element instead of the input element. Also, this is what I would call the "standard way".

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

See it in action on JSBin

like image 86
Patrick Oscity Avatar answered Oct 29 '22 19:10

Patrick Oscity


padde's solution is right, but risen up another problem i.e.

As said by Adam (the questioner) that it is showing empty popup. Here is the complete and working solution

<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>
like image 27
wakqasahmed Avatar answered Oct 29 '22 20:10

wakqasahmed