Form action event not working on popup
<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>