0

我有一个表单,我希望在单击提交按钮时触发一个模式。我正在使用 Zurb Reveal.js 插件,并且正在调用 jQuery 和相关的reveal.js。

我有以下代码:

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

这在页面的底部(在 end body 标记之前):

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

当有一个锚标记触发模态时,data-reveal-id 起作用,所以我认为我可以使用上述 JS(在插件站点上给出)以编程方式触发它,但这似乎也不起作用。帮助?

4

2 回答 2

0

由于您的按钮是提交按钮,当您单击它时,页面将根据表单选项刷新。如果您不使用表单,则需要使用<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-10T11:22:04.040 回答
0

您需要先阻止按钮的默认字符,然后再打开模式。

<script type="text/javascript">
  $(document).ready(function() {
    $("#buttonForModal").click(function(event) {
      event.preventDefault();
      $("#myModal").reveal();
    });
  });
</script>
于 2014-01-16T15:25:41.043 回答