jQUery fancybox 启动 onclick

Question

这是 JavaScript：

$(document).ready(
   function(){
        $('#button').click(function() {
        $("#content_of_fancybox").fancybox({
            'scrolling'     : 'no',
            'titleShow'     : false
        });
        });
   }
);

和 HTML

<input type="button" value=" Open fancybox " id="button">

<div id="content_of_fancybox" style="width: 400px; margin: 0; display: none;">
Hello pandas!
</div>

当用户单击按钮时，fancybox 应该打开，但事实并非如此。错误是什么（我猜是在 javascript 部分）？

Answer 1

Adam，当我开始使用 fancybox 时我也很困惑，但我建议你看看文档。当您对某些内容调用实际的 fancybox 函数时，它只是将页面的该部分设置为在 fancybox 中弹出。调用该函数时它不会弹出它。基本上，您的代码所做的就是设置 ID 为 content_of_fancybox 的 DOM 元素，当您单击 id 为 button 的 DOM 元素时，它会在 fancybox 中弹出。从那里，如果您有一个格式正确的锚标记，那么您可以单击它，您的内容将显示在“Fancybox”中。

按照此处找到的步骤http://fancybox.net/howto进行设置并运行！

这是一个可以正常工作的 JS 小提琴：

http://jsfiddle.net/GU7W9/

Answer 2

Fancybox 在单击将 fancybox 附加到的对象时起作用：http://jsfiddle.net/maniator/WbCMV/2/

---

如果你想要一个对话框，只需使用 jQuery 对话框：

http://jsfiddle.net/maniator/WbCMV/4/