съдържанието на fancybox не е скрито

Използвам вграден Fancybox за първи път и по някаква причина не мога да покажа/скрия съдържанието в Fancybox.

Това е моят код:

html

<a id="openUserDialogBox" href="/bg#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="/bg#assocUserDialogBox">Click</a>

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

Fancybox ще извлече елемента с ID, който съответства на href на връзката, този елемент не може да бъде скрит, така че трябва да бъде обвит в друг елемент, който вместо това е скрит.

Ако съдържанието съдържа бутони и други неща, настройването на hideOnContentClick на false също е добра идея:

$('#openUserDialogBox').fancybox({
  'hideOnContentClick': false,
  'showCloseButton' : true,
  'enableEscapeButton' : true
});
person adeneo    schedule 04.03.2012
comment
А, сега разбирам. Благодаря! - person Steven; 04.03.2012