Question

我只是想知道是否可以在点击事件上创建一个带有隐藏div内容的fancybox。像这样当按下按钮时：

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

执行此javascript代码并以某种方式生成一个fancybox：

function showFormInformation()
{

}

这就是我要展示的div：

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

在互联网上搜索时，似乎fancybox不是为此做的...它更多是为链接点击而制作的。我应该使用不同的框架???

Answer 1

这在Fancybox的驾驶室中是正确的！

只是这样做：

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

或正如JFK所指出的那样：

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

你应该注意隐藏div的css路径一旦进入你的fancybox就会有所不同。

查看此答案（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()
    });
}

小提琴here

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

带有click事件的jQuery和fancybox

2 个答案: