Question

显然看起来这个fancybox只适用于有ID或类的锚标签？但我想在提交按钮中使用它......有没有办法在该元素中使用它？

例如，这不起作用，因为fancybox需要一个可以提取内容的href

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

精美的盒子代码

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

Answer 1

请参阅＃，

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

Answer 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

Answer 3

您缺少节点参考中的＃。但这可能只是因为你在问题中输入了你的代码。您始终可以将超链接设置为看起来像一个按钮，为其指定一个URL并将fancybox附加到它：

<!--<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();

Answer 4

我试图将此添加到shopify

<form action="//mailchimpurlcodehere" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>


<input type="email" value="" name="EMAIL" style="padding:10px; background:#C7DAE5; border:0px; color:#000; width:220px; font-weight:bold;" id="mce-EMAIL" placeholder="Email address here" required><input style="padding:10px; background:#134F73; border:0px; color:#000; font-weight:bold;" type="submit" value="STAY TUNED" name="subscribe" id="mc-embedded-subscribe" class="button"

但我不知道在哪里放javascript字符串它不起作用。我甚至尝试添加一个文件夹，并将其命名为jquery.fancybutton.js以获取此代码：

 $("#mc-embedded-subscribe").fancybox({
type : "iframe",
href : "mailchimpurlcodehere"});

所以我可以将其添加为{{＆＃39; jquery.fancybutton.js＆＃39; | shopify_asset_url | script_tag}}但它没有帮助。

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

4 个答案: