jquery - 带有点击事件的jQuery和fancybox

Question

我只想知道是否可以在单击事件上创建一个包含隐藏 div 内容的幻想框。像这样当按下按钮时：

<input type="button" class="headerButtonNormal" id="test" value="Contact information" onmouseover=this.className="headerButtonHoover"
           onmouseout=this.className="headerButtonNormal" onclick="showFormInformation()">

执行这段 javascript 代码并以某种方式生成一个幻想框：

function showFormInformation()
{

}

这是我要展示的 div：

<div id="inline">
Test fancybox
</div>

在互联网上搜索时，fancybox 似乎不是为此而设计的……它更多地是为链接点击而设计的。我应该使用不同的框架吗？？？

Answer 1

这就在 Fancybox 的驾驶室里！

做就是了：

$.fancybox({
    content: $('#inline')
})

或者正如肯尼迪指出的那样：

$.fancybox({
    href: '#inline'
})

您应该注意，隐藏的 div 的 css 路径在您的幻想箱内时会有所不同。

查看此答案（https://stackoverflow.com/a/3819374/599075）以了解另一种方法！

Answer 2

尝试：

HTML：

<input type="button" class="headerButtonNormal" id="test" value="Contact information"
onmouseover=this.className="headerButtonHoover" onmouseout=this.className="headerButtonNormal">
<div id="inline">Test fancybox</div>

jQuery：

$("#test").on("click", function () {
    showFormInformation();

    return false;
});

function showFormInformation() {
    $.fancybox({
        content: $("#inline").html()
    });
}

在这里提琴

您可能希望移动内联事件处理程序以使用 jQuery 绑定，因为您已经在使用该库。