让一个提交按钮触发一个模式

我有一个表单，我想要一个模式在点击提交按钮时触发。我使用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

让一个提交按钮触发一个模式

回答

相关问题