Как использовать fancybox в Jquery

Question

Я хочу использовать fancybox для всплывающего сообщения, если нажата определенная кнопка.Я хочу, чтобы сообщение fancybox содержало только некоторый текст и кнопку «закрыть», я не против использовать кнопку по умолчанию, если она есть.

Может кто-нибудь привести пример того, как оно должно быть написано в HTMLстраница и страница js?

любая помощь будет высоко ценится!

Answer 1

Предполагается, что у вашей кнопки есть идентификатор вашей кнопки:

$("#yourButton").click(function () {
    var content = $("<div>Hello<br /><br /></div>");
    var button = $("<input type='button' value='Close Me!' />");
    content.append(button);

    $.fancybox({ content: content });
    $(button).click(function () { $.fancybox.close(); });
});

Answer 2

Это может помочь вам:

http://fancybox.net/howto

Как только вам потребуются все соответствующие файлы, чтобы подключить его ко всем ссылкам, используйте это:

$("a").fancybox();

Answer 3

Если html достаточно сложный, вы можете поместить его в скрытый div, как я сделал ниже. Это уменьшенная версия кода, который я запускаю на своем сайте для создания диалогового окна fancybox. Работает с FancyBox версии 1.3.4 (я еще не обновился до 2). Лично мне нравится кнопка закрытия по умолчанию (кружок X в верхнем правом углу), и даже нажатие Escape работает, но я добавил пользовательскую кнопку закрытия во всплывающее окно. Включает JavaScript для закрытия FancyBox.

<a id="mylink" href="#mypopup">link style button</a>
<div id="mybutton">button</div>

<div style="display:none">
<div id="mypopup">
<h1>My Title</h1>
<p>My Message</p>
<!--... other complex html can go here ...-->
<input type="button" onclick="$.fancybox.close();" value="Custom Close Button" />
</div>
</div>

<script type="text/javascript">
$('#mylink').fancybox();
$('#mybutton').click(function() {
    $.fancybox({
        'orig' : $(this),
        'href' : '#mypopup'
    })
});
</script>