CODEWITHSUNDEEP
jquerycssfancybox
Steven
Steven

Reputation: 19425

fancybox content is not hidden

I'm using inline Fancybox for the first time and for some reason I'm not able to show / hide the content within the Fancybox.

This is my code:

html

<a id="openUserDialogBox" href="#assocUserDialogBox">Click</a>

<div id="assocUserDialogBox">
  My content here
</div>

css

#assocUserDialogBox { width: 400px; text-align: center; padding: 20px; }

js

$('#openUserDialogBox').fancybox({
  'showCloseButton' : true,
  'enableEscapeButton' : true
});

The above code opens the Fancybox correctly and dispalys the content.
The problem is that the content is not hidden on page before clicking the Fancybox link.

If I alter the css:

#assocUserDialogBox { width: 400px; text-align: center; padding: 20px; display: none; }

This hides the content from the main page, but it also hides the content in the Fancybox popup.

What am I missing here?

Upvotes: 2

Views: 2682

Answers (1)

adeneo
adeneo

Reputation: 318182

You probably need to wrap it, like so:

<a id="openUserDialogBox" href="#assocUserDialogBox">Click</a>

<div style="display:none">
    <div id="assocUserDialogBox">
        My content here
    </div>
</div>

Fancybox will fetch the element with an ID that matches the href of the link, that element can not be hidden, so it must be wrapped inside another element that is hidden instead.

If the content contains buttons and stuff, setting hideOnContentClick to false is also a good idea:

$('#openUserDialogBox').fancybox({
  'hideOnContentClick': false,
  'showCloseButton' : true,
  'enableEscapeButton' : true
});

Upvotes: 7

Related Questions