讓一個提交按鈕觸發一個模式

我有一個表單，我想要一個模式在點擊提交按鈕時觸發。我使用Zurb Reveal.js插件，並調用jQuery和相關的reveal.js。讓一個提交按鈕觸發一個模式

我有下面的代碼：

<input type="submit" id="submit-button" data-reveal-id="myModal" value="Submit this support request">

這在頁面的底部（年底前體標籤）：

<div id="myModal" class="reveal-modal"> 
<h1>Modal Title</h1> 
<p>Any content could go in here.</p> 
<a class="close-reveal-modal">&#215;</a> 
</div> 

<script type="text/javascript"> 
    $(document).ready(function() { 
    $("#buttonForModal").click(function() { 
     $("#myModal").reveal(); 
    }); 
    }); 
</script>

的數據顯示-ID的工作時有一個錨標籤發射模態，所以我認爲我可以用上面的JS（在插件網站上給出）以編程方式引發它，但這似乎也不起作用。幫幫我？

來源

2013-02-10 imcconnell

什麼是#buttonForModal？應該是＃提交按鈕？你也許需要'停止'表單提交，否則你的模態會在表單提交後立即消失 – lostsource 2013-02-10 11:16:50

對不起 - 我剛剛從他們的頁面上覆制了那段代碼，我的提交按鈕取代了buttonForModal – imcconnell 2013-02-10 11:19:33

@ user1802256是表單標籤還是節點中的提交按鈕？ – 2013-02-10 11:21:38

由於您的按鈕是一個提交按鈕，當您點擊它時，頁面將根據表單選項進行刷新。如果您沒有使用表格，則需要使用<button>。

reveal不是一個jQuery的標準方法

<script type="text/javascript"> 
    $(document).ready(function() { 
    $("#buttonForModal").click(function(event) { 
     //Prevent form submission to avoid page refreshing 
     event.stopPropagation() 

     //Show your div 
     $("#myModal").fadeIn(300); 
    }); 
    }); 
</script>

來源

2013-02-10 11:22:04 sdespont

您需要防止按鈕的默認字符第一，然後打開模態。

<script type="text/javascript"> 
    $(document).ready(function() { 
    $("#buttonForModal").click(function(event) { 
     event.preventDefault(); 
     $("#myModal").reveal(); 
    }); 
    }); 
</script>

來源

2014-01-16 15:25:41

讓一個提交按鈕觸發一個模式

回答

相關問題