Контент fancybox не скрыт

Question

Я впервые использую встроенный Fancybox , и по какой-то причине я не могу показать / скрыть содержимое в Fancybox.

Это мой код:

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
});

Приведенный выше код корректно открывает Fancybox и выводит содержимое.
Проблема в том, что содержимое не скрыто на странице до нажатия на ссылку Fancybox.

Если я изменяю css:

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

Это скрывает содержимое от главной страницы, ноон также скрывает содержимое во всплывающем окне Fancybox.

Что мне здесь не хватает?

Answer 1

Вам, вероятно, нужно обернуть его, например, так:

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

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

Fancybox извлечет элемент с идентификатором, который соответствует href ссылки, этот элемент не может быть скрыт, поэтому он должен быть обернутвнутри другого элемента, который скрыт вместо этого.

Если содержимое содержит кнопки и прочее, установка falseOnContentClick в false также является хорошей идеей:

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