Home/ Questions/Q 914167
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T17:40:34+00:00

When setting a style at #inline2 hiding it, Fancybox will appear empty on click.

  • 0

When setting a style at #inline2 hiding it, Fancybox will appear empty on click. In addition the #inline2 element can be seen in Fancybox when there’s no style hiding it. Though this example is copy’ed directly from the various examples on the official Fancybox site. See Various Examples at http://fancybox.net/home.

Someone please enlighten me, and tell me what I’m doing wrong! I obviously only want the #inline2 element to be shown in Fancybox, and not as a regular part of my page.

Thanks in advance

/The guy having spend hours on what should be an easy job!

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html lang="da">
    <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8">
 <link type="text/css" href="/css/jquery.fancybox-1.3.1.css" rel="stylesheet" />
 <script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
 <script type="text/javascript" src="/js/jquery.fancybox-1.3.1.js"></script>
 <script type="text/javascript">
 jQuery(document).ready(function() {
  $("#various2").fancybox({
   'modal' : true,
   'transitionIn' : 'fade',
   'transitionOut' : 'fade'
  });
 });
 </script>
    </head>
    <body>

    <a id="various2" href="#inline2">Inline - modal window</a>
    <div id="inline2" style="display:none;">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></p>
    </div>

    </body>
    </html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    When I look at this example, it becomes obvious that you have to point the href of the anchor element to a div within another one with style="display:none" (see #4), so you shouldn’t put the actual contents within a div with display:none, otherwise the contents will remain hidden (as you can see in Firebug).

    Change your code to

    <div style="display:none"><div id="inline2">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. &nbsp;&nbsp;</p>
</div></div>

    BTW, there are some errors within your page, like the closing tag </a> in #inline2, and some others. When your page is rendered using an XML parser, your users will only see a (probably yellow) error page.

    • 0