title: Form action event not working on popup
body: <p>I have a form inside popup but my form action event not working after click on button. </p>
  
  <p>My code:</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>$.fn.expose = function(options) {
  
    var $modal = $(this),
      $trigger = $("a[href=" + this.selector + "]");
  
    $modal.on("expose:open", function() {
  
      $modal.addClass("is-visible");
      $modal.trigger("expose:opened");
    });
  
    $modal.on("expose:close", function() {
  
      $modal.removeClass("is-visible");
      $modal.trigger("expose:closed");
    });
  
    $trigger.on("click", function(e) {
  
      e.preventDefault();
      $modal.trigger("expose:open");
    });
  
    $modal.add($modal.find(".close")).on("click", function(e) {
  
      e.preventDefault();
  
      // if it isn't the background or close button, bail
      if (e.target !== this)
        return;
  
      $modal.trigger("expose:close");
    });
  
    return;
  }
  
  $("#Popup").expose();
  
  // Example Cancel Button
  
  $(".cancel").on("click", function(e) {
  
    e.preventDefault();
    $(this).trigger("expose:close");
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.Modal {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: transparent;
    visibility: hidden;
  }
  .Modal .content {
    position: absolute;
    left: 50%;
    top: 30%;
    width: 50%;
    padding: 50px;
    border-radius: 3px;
    background: #fff;
    transform: translate(-50%, -30%) scale(0);
  }
  .Modal .close {
    position: absolute;
    top: 8px;
    right: 8px;
    display: block;
    width: 18px;
    height: 18px;
    padding: 5px;
    line-height: 18px;
    border-radius: 50%;
    text-align: center;
    cursor: pointer;
    background: #2ecc71;
    color: #fff;
  }
  .Modal .close:before {
    content: '\2715';
  }
  .Modal.is-visible {
    visibility: visible;
    background: rgba(0, 0, 0, 0.5);
    -webkit-transition: background .35s;
    -moz-transition: background .35s;
    transition: background .35s;
    -webkit-transition-delay: .1s;
    -moz-transition-delay: .1s;
    transition-delay: .1s;
  }
  .Modal.is-visible .content {
    -webkit-transform: translate(-50%, -30%) scale(1);
    -moz-transform: translate(-50%, -30%) scale(1);
    transform: translate(-50%, -30%) scale(1);
    -webkit-transform: transition: transform .35s;
    -moz-transform: transition: transform .35s;
    transition: transform .35s;
  }
  .button {
    display: block;
    width: 150px;
    height: 45px;
    line-height: 45px;
    margin: 125px auto 0;
    border-radius: 3px;
    text-align: center;
    text-decoration: none;
    background: #2ecc71;
    color: #fff;
  }
  input[type="text"] {
    width: 100%;
    border-radius: 50px;
    border: 1px solid #ccc;
    padding: 09px 0px;
    outline: none;
    margin-bottom: 15px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;a href="#Popup" class="button"&gt;Expose Modal&lt;/a&gt;
  &lt;!--popup content here--&gt;
  &lt;div id="Popup" class="Modal"&gt;
    &lt;div class="content"&gt;
      &lt;form action="demo.php" method="post" id="register-form"&gt;
  
        &lt;input type="text" name="name" placeholder="Name:" id="name"&gt;
        &lt;input type="text" name="location" placeholder="Location:" id="location"&gt;
  
        &lt;div class="center-text vpadding"&gt;
          &lt;input type="submit" value="request now" class="button-request"&gt;
        &lt;/div&gt;
      &lt;/form&gt;
  
      &lt;span class="close"&gt;&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Please help me in this.</p>