Menu icon Foundation
Looking for simple Reveal Modal code

Hey all, new to this so patience please. :) I am using reveal. Working great! However i'm using reveal with a submit but for a quick email sign up. The form i have set up refreshes the page when it processes. I noticed that you can trigger reveal with java. The example in the docs shows for a click event. I'm wondering if someone can show me how to write that with a reload event? Basically anytime someone fills out the form in the footer and clicks the arrow a quick thank you modal pops up. Thanks in advance!!! :)

reveal modalrevealjava example

Hey all, new to this so patience please. :) I am using reveal. Working great! However i'm using reveal with a submit but for a quick email sign up. The form i have set up refreshes the page when it processes. I noticed that you can trigger reveal with java. The example in the docs shows for a click event. I'm wondering if someone can show me how to write that with a reload event? Basically anytime someone fills out the form in the footer and clicks the arrow a quick thank you modal pops up. Thanks in advance!!! :)

Stephen Sauceda almost 6 years ago

Hi Rebecca,

You can still set it up for the 'click' event of the submit button on the form and just wait to actually submit the form until after the modal fires. Maybe this would work for you? :)

  var $form = $('#myForm'); // #myForm = the ID of the form
  var $modal = $('#myModal'); // #myModal = the ID of the modal
  var $button = $('#submitButton'); // #submitButton = the ID of the submit button

  // When the submit button is clicked
  $button.on('click', function(e){

    // stop the form from submitting
    e.preventDefault();

    // open the modal
    $modal.foundation('reveal', 'open');

    // wait 2 seconds before closing the modal
    setTimeout(dismissModal, 2000);

    function dismissModal(){
      $modal.foundation('reveal', 'close');

      // Finally, submit the form
      $form.submit();
    }

  });