单击输入提交按钮时如何添加fancybox？答案

【问题标题】：how to add fancybox when an input submit button is clicked?单击输入提交按钮时如何添加fancybox？
【发布时间】：2013-02-22 07:20:28
【问题描述】：

显然，这个花式框似乎只适用于具有 ID 或类的锚标签？，但我想在提交按钮中使用它...有没有办法在那个元素中使用它？

例如这不起作用，因为fancybox需要一个href来拉取内容

<input type="submit" id="submitme" name="submitme" value="SUBMIT ME" />

花式框码

$("#submitme").fancybox();

【问题讨论】：

你想/想在fancybox中显示什么？
你错过了# $("#submitme").fancybox();将起作用如果有用，请对评论进行投票，谢谢
我会显示另一个表单，这个表单在花哨的盒子里，也会有一个提交按钮，它会从它自己的输入字段和父表单数据提交数据跨度>

标签： javascript jquery html fancybox

【解决方案1】：

通过#引用它，

$("#submitme").fancybox();

【讨论】：

不起作用，我使用 ID 或 Class..因为它是元素的输入类型，而 fancybox 需要一个标签和一个 href

【解决方案2】：

问题不在于fancybox 是否可以绑定到submit 按钮。实际的问题是您的submit 按钮不会告诉fancybox 要打开的目标内容以及它的type 内容。

所以有这个：

<input type="submit" id="submitme" name="submitme" value="SUBMIT ME" />

... 如果您在您的 costom 脚本中对缺少的元素 href 和 type 进行硬编码，则将起作用，例如：

$("#submitme").fancybox({
    type : "iframe",
    href : "http://jsfiddle.net"
});

见JSFIDDLE

您也可以对任何 html 内容进行硬编码，例如：

$("#submitme").fancybox({
    content : "<p>Any html as content</p>"
});

见JSFIDDLE

【讨论】：

【解决方案3】：

您的节点引用中缺少#。但这可能只是因为您在问题中输入了代码。您总是可以将超链接设置为看起来像一个按钮，给它一个 URL 并将花式框附加到它：

<!--<input type="submit" id="submitme" name="submitme" value="SUBMIT ME" />-->
<a href="somewhere.htm" id="submitme" name="submitme" value="SUBMIT ME" >SUBMIT ME</a>

$("#submitme").click(function(event){
    event.preventDefault();//stop the hyperlink from navigating away from the current page
}).fancybox();

【讨论】：

我没有展示 CSS 主要是因为它不是那么重要。如果你想让你的链接看起来像一个按钮，你基本上需要设置边框、边距、显示：块和背景颜色。
难道没有其他方法可以使用提交按钮而不是使用那个标签吗？
是的，但是当您中断提交按钮的默认行为时，Internet Explorer 无法正常运行。不过，这当然值得一试。如果您愿意，可以使用我的 jQuery 代码和按钮。我会对结果感兴趣。很抱歉我没有时间调查。