带有点击事件的jQuery和fancybox答案

【问题标题】：jQuery and fancybox with click event带有点击事件的jQuery和fancybox
【发布时间】：2013-03-10 17:50:40
【问题描述】：

我只是想知道是否可以在单击事件上创建一个带有隐藏 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 似乎不是为此而设计的……它更适合链接点击。我应该使用不同的框架吗？？？

【问题讨论】：

标签： jquery fancybox

【解决方案1】：

这就是 Fancybox 的驾驶室！

只是做：

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

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

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

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

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

【讨论】：

... 或更好$.fancybox({href: "#inline"});

【解决方案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 绑定，因为您已经在使用该库。

【讨论】：

... 或更好$.fancybox({href: "#inline"});