Show a div with Fancybox

Question

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        lt input type  button  value  Load Form  id  btnForm    gt        lt div id  divForm  style  display none  gt           lt form action  tbd  gt              File   lt input type  file    gt  lt br   gt  lt br   gt               lt input type  submit    gt           lt  form gt       lt  div gt

User · Answer

You just use this and it will be helpful for you      btnForm   click function        fancybox        padding    0       width      1087       height     610       type        iframe       content        divForm   show

User · Answer

You could use       btnForm   click function          fancybox                content        divForm   html

User · Answer

For users coming back to this post long after the initial answer was accepted  it may pay off to note that now you can use   data-fancybox-href        on any element  since data is an HTML-5 accepted attribute  to have the fancybox work on say an input form if for some reason you can t use the options to initiate for some reason  like say you have multiple elements on the page that use fancybox and they all share a similar class you call fancybox on

User · Answer

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   lt html gt   lt head gt       lt script type  text javascript  charset  utf-8  src  http   ajax googleapis com ajax libs jquery 1 7 1 jquery min js  gt  lt  script gt       lt script type  text javascript  src  http   fancyapps com fancybox source jquery fancybox pack js v 2 0 5  gt  lt  script gt       lt link rel  stylesheet  type  text css  href  http   fancyapps com fancybox source jquery fancybox css v 2 0 5  media  screen    gt   lt  head gt   lt body gt    lt a href   divForm  id  btnForm  gt Load Form lt  a gt    lt div id  divForm  style  display none  gt       lt form action  tbd  gt          File   lt input type  file    gt  lt br   gt  lt br   gt           lt input type  submit    gt       lt  form gt   lt  div gt    lt script type  text javascript  gt    function             btnForm   fancybox            onStart   function         divForm   css  display   block                            onClosed   function         divForm   css  display   none                   lt  script gt    lt  body gt   lt  html gt

User · Answer

I use approach with appending  singleton  link for element you want to show in fancybox  This is code  what I use with some minor edits   function showElementInPopUp elementId        var fancyboxAnchorElementId    fancyboxTriggerFor     elementId      if        fancyboxAnchorElementId  length    0               body   append   lt a id      fancyboxAnchorElementId      href       elementId     style  display none   gt  lt  a gt                   fancyboxAnchorElementId  fancybox                       fancyboxAnchorElementId  click        Additional explanation  If you show fancybox with  content  option  it will duplicate DOM  which is inside elements  Sometimes this is not OK  In my case I needed to have the same elements  because they were used in form

User · Answer

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     lt html gt   lt head gt     lt script type  text javascript  charset  utf-8  src  http   ajax googleapis com ajax libs jquery 1 7 1 jquery min js  gt  lt  script gt     lt script type  text javascript  src  http   fancyapps com fancybox source jquery fancybox pack js v 2 0 5  gt  lt  script gt     lt link rel  stylesheet  type  text css  href  http   fancyapps com fancybox source jquery fancybox css v 2 0 5  media  screen    gt   lt  head gt   lt body gt    lt a href   divForm  id  btnForm  gt Load Form lt  a gt    lt div id  divForm  style  display none  gt     lt form action  tbd  gt      File   lt input type  file    gt  lt br   gt  lt br   gt       lt input type  submit    gt     lt  form gt   lt  div gt    lt script type  text javascript  gt      function            btnForm   fancybox           lt  script gt    lt  body gt   lt  html gt    See it in action on JSBin

User · Answer

Simple  e g  if div id  mydiv   jQuery fancybox open  href    mydiv       This also makes JS code functional which is inside div

[javascript] Show a div with Fancybox

Examples related to javascript

Examples related to jquery

Examples related to fancybox