javascript - 入力送信ボタンがクリックされたときにfancyboxを追加する方法は?

Question

どうやらこのファンシーボックスはIDまたはクラスを持つアンカータグでしか機能しないようですが、送信ボタンで使用したいのですが...その要素で使用する方法はありますか?

たとえば、fancybox にはコンテンツをプルする href が必要なため、これは機能しません。

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

ファンシーボックスコード

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

Answer 1

# で参照します。

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

Answer 2

The issue is not whether fancybox can be bound to a submit button or not. The actual issue is that your submit button doesn't tell fancybox the target content to open and the type of content it is.

So having this :

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

... will work if you hard code the missing elements href and type in your costom script like :

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

See JSFIDDLE

Optionally, you can hard code any html content too like :

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

See 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 }} しかし、それは助けにはなりません。