содержимое fancybox не скрыто

Я впервые использую встроенный 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.

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


jquery css fancybox
person Steven    schedule 04.03.2012    source источник

Ответы (1)


arrow_upward
7
arrow_downward

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

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

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

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

Если контент содержит кнопки и прочее, также неплохо установить для свойства hideOnContentClick значение false:

$('#openUserDialogBox').fancybox({
  'hideOnContentClick': false,
  'showCloseButton' : true,
  'enableEscapeButton' : true
});
person adeneo    schedule 04.03.2012
comment
А, теперь я понимаю. Спасибо! - person Steven; 04.03.2012