如何在輸入提交按鈕被點擊時添加fancybox？

顯然它看起來像這個fancybox只適用於具有ID或類的錨定標記，但我想在提交按鈕中使用它...有沒有一種方法可以在該元素中使用它？如何在輸入提交按鈕被點擊時添加fancybox？

例如這不起作用，因爲需要的fancybox一個href，這將拉動內容

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

看中框代碼

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

來源

2013-02-22 sasori

你在想什麼/想要在fancybox中顯示？ – lukeocom 2013-02-22 07:25:04

You miss＃ $（「＃submitme」）。fancybox（）;將工作如果它的有用的感謝 – 2013-02-22 07:30:59

要顯示另一個表單，並且這個表單在花哨的框中，也將有一個提交按鈕，因此，它將提交數據從它自己的輸入字段和從家長表格數據 – sasori 2013-02-24 14:42:33

的問題不是是否的fancybox可以綁定到submit按鈕與否。實際的問題是，你的submit按鈕不告訴fancybox要打開的目標內容和它的內容type。

因此，有這樣的：如果你硬編碼

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

...將工作缺少的元素href和type在德，崔根源腳本，如：

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

見JSFIDDLE

或者，您可以硬編碼任何htm升的內容太像：

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

見JSFIDDLE

來源

2013-02-22 08:40:23 JFK

通過＃參考它，

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

來源

2013-02-22 07:21:25 EnterJQ

不起作用，我使用ID或類別..因爲它是一種輸入類型的元素，fancybox需要一個標記和一個href – sasori 2013-02-22 07:30:55

你缺少節點引用中的＃。但這可能只是因爲你在問題中輸入了你的代碼。你總是可以樣式的超鏈接看起來像一個按鈕，給它一個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();

來源

2013-02-22 07:29:31

我沒有顯示CSS，主要是因爲它並不重要。如果你想讓你的鏈接看起來像一個按鈕，你基本上想要設置邊框，邊距，顯示：塊和背景顏色。 – 2013-02-22 07:30:47

是否沒有其他方式使用提交按鈕而不是使用該標籤？ – sasori 2013-02-22 07:49:25

是的，但是當您中斷提交按鈕的默認行爲時，Internet Explorer無法正常播放。這當然值得一試。如果你喜歡，你可以使用我的jQuery代碼和按鈕。我對結果感興趣。對不起，我沒有時間調查。 – 2013-02-22 08:14:11

我試圖加入到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}}但它沒有工作的幫助。

來源

2015-05-09 22:37:31 Shane

如何在輸入提交按鈕被點擊時添加fancybox？

回答

相關問題