Question

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

当有一个锚标签触发模态时，data-reveal-id有效，所以我认为我可以使用上面的JS（在插件网站上给出）以编程方式触发它，但这似乎不起作用。救命？

Answer 1

由于您的按钮是提交按钮，当您单击它时，将根据表单选项刷新页面。如果您没有使用表单，则需要使用<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>

Answer 2

您需要首先阻止按钮的默认字符，然后打开模态。

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

使提交按钮触发模态

2 个答案: