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

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" />

...如果您对缺少的元素href和type您的 cotom 脚本进行硬编码，例如：

$("#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"});

所以我可以将其添加为 {{ 'jquery.fancybutton.js' | shopify_asset_url | script_tag }} 但它不起作用帮助。