Make a submit button fire a modal

Question

I've got a form and I want a modal to fire when the submit button is clicked. I'm using the Zurb Reveal.js plugin, and am calling jQuery and the relevant reveal.js.

I've got the following code:

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

And this at the foot of the page (before the end body tag):

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

The data-reveal-id works when there is an anchor tag firing the modal, so I thought that I could fire it programmatically with the above JS (given on the plugin site), but that doesn't seem to work either. Help?

Answer 1

As your button is a submit button, when you will click on it, the page will be refreshed according to the form options. If you are not using a form, you need to use <button> instead.

reveal is not a JQuery standard method

<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

You need to prevent button's default character first then open modal.

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