title: how to disable modal popup after form submission
body: <p>I am pretty new to JavaScript and frontEnd, I am trying to build a modal popup which asks for a form submission.Now what I am trying to do is to hide popup as soon the user clicks the submit button.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    function openColorBox(){
          $.colorbox({iframe:true, width:"50%", height:"50%", href: "new_greeting_form.html"});
        }
        
        setTimeout(openColorBox, 5000);
      &lt;/script&gt;
      &lt;script&gt;
  // if you want to use the 'fire' or 'disable' fn,
  // you need to save OuiBounce to an object
    var _ouibounce = ouibounce(document.getElementById('ouibounce-modal'), {
    aggressive: true,
    timer: 0,
    callback: function() {  }
    });
  
    $('body').on('click', function() {
    $('#ouibounce-modal').hide();
  });
  
  $('#ouibounce-modal .modal-footer').on('click', function() {
    $('#ouibounce-modal').hide();
  });
  
  $('#ouibounce-modal .modal').on('click', function(e) {
    e.stopPropagation();
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset=utf-8 /&gt;
      &lt;title&gt;test&lt;/title&gt;
      &lt;link rel="stylesheet" href="https://cdn.rawgit.com/jackmoore/colorbox/master/example1/colorbox.css" /&gt;
      &lt;link rel="stylesheet" href="\ouibounce.min.css"&gt;
      
    &lt;/head&gt;
    &lt;body&gt;
  
  
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"&gt;&lt;/script&gt;
      
      &lt;script src="\ouibounce.js"&gt;&lt;/script&gt;
      &lt;div id="ouibounce-modal"&gt;
    &lt;div class="underlay"&gt;&lt;/div&gt;
    &lt;div class="modal"&gt;
    &lt;div class="modal-title"&gt;
    &lt;h3&gt;  &lt;/h3&gt;
    &lt;/div&gt;
    &lt;div class="modal-body"&gt;
  
  
    &lt;h2&gt;ThankYou for coming!!&lt;/h2&gt;
    &lt;/div&gt;
    &lt;div class="modal-footer"&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Anyone please help me in this,I'm new and not getting how to proceed in this.</p>