javascript - 为什么我的表单没有提交

Question

我有一个包含表单的登录弹出窗口。问题是表单在提交时什么都不做。为什么是这样？我试过移动表单元素，但没有任何效果。我误解了输入的某些部分吗？ action 是 hi 故意的，所以我会转到一个完全不同的页面。但是没有任何反应......

     /***********************\

    	Modal Module - Title CSS FTW

    \***********************/

    body {
padding: 0;
margin: 0;
}

    #nav_logo {
      font-family: 'Open Sans', sans-serif;
      color: white;
      font-size: 20px;
      position: relative;
      left: 188px;
      top: 9px;
    }

    #search_engine {
      background: white;
      color: #353535;
      outline: none;
      width: 500px;
      font-size: 15px;
      font-family: 'Open Sans', sans-serif;
      padding: 7px 30px 7px 10px;
      border: none;
      border-radius: 3px;
      position: relative;
      top: 9px;
      left: 210px;
    }

    #search_engine::-webkit-input-placeholder { /* WebKit, Blink, Edge */
        color:    #353535;
    }

    #search_engine:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
       color:    #353535;
       opacity:  1;
    }

    #search_engine::-moz-placeholder { /* Mozilla Firefox 19+ */
       color:    #353535;
       opacity:  1;
    }

    #search_engine:-ms-input-placeholder { /* Internet Explorer 10-11 */
       color:    #353535;
    }

    #login_nav_div, #signup_nav_div {
      float: right;
      font-family: 'Open Sans', sans-serif;
      color: #353535;
      font-size: 17px;
      padding: 7px 30px 7px 10px;
      border-radius: 3px;
      margin-right: 10px;
      position: relative;
      left: -66px;
      background: white;
      top: 6px;
    }

    #login, #signup {
      position: relative;
      top: -1px;
      left: 9px;
    }

    #nav {
      width: 1600px;
      height: 50px;
      background: #1F1F1F;
    }

    .Modal {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: transparent;
      visibility: hidden;
    }
    .Modal .content {
      position: absolute;
      left: 50%;
      top: 30%;
      width: 390px;
      padding: 50px;
      border-radius: 3px;
      background: #fff;
      transform: translate(-50%, -30%) scale(0);
      z-index: 50;
    }
    .Modal .close {
      position: absolute;
      top: 8px;
      right: 8px;
      display: block;
      width: 18px;
      height: 18px;
      padding: 2px;
      line-height: 18px;
      border-radius: 50%;
      text-align: center;
      cursor: pointer;
      background: #C5C5C5;
      color: #fff;
    }
    .Modal .close:before {
      content: '\2715';
    }
    .Modal.is-visible {
      visibility: visible;
      background: rgba(0, 0, 0, 0.5);
      transition: background .35s;
      transition-delay: .1s;
      z-index: 40;
    }
    .Modal.is-visible .content {
      transform: translate(-50%, -30%) scale(1);
      transition: transform .35s;
    }

    /* Model */

    #login_title {
       font-family: 'Open Sans', sans-serif;
       font-size: 23px;
       letter-spacing: 1px;
       position: relative;
       top: -20px;
       left: 110px;
    }

    #login_username, #login_password {
      outline: none;
      border: 1px solid #ccc;
      color: #353535;
      padding: 12px 10px 12px 10px;
      border-radius: 3px;
      font-size: 16px;
      position: relative;
      left: -30px;
      width: 425px;
    }

    #login_username:focus, #login_password:focus {
      border: 1px solid #4096ee;
    }

    #login_submit {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4096ee+0,4096ee+100;Blue+Flat+%232 */
    background: #4096ee; /* Old browsers */
    background: -moz-linear-gradient(top,  #4096ee 0%, #4096ee 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #4096ee 0%,#4096ee 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #4096ee 0%,#4096ee 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4096ee', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */

      color: white;
      text-align: center;
      padding: 11px 12px 11px 12px;
      font-size: 19px;
      width: 445px;
      font-weight: normal;
      position: relative;
      top: 5px;
      border-radius: 3px;
      float: left;
      font-family: 'Open Sans', sans-serif;
      border: none;
      outline: none;
      cursor: pointer;
      position: relative;
      left: -28px;
      font-weight: bold;
    }

    #login_submit:focus, #login_submit:hover {
      background: rgb(37,141,200);
    }


    /* End of Model */

    <!DOCTYPE html>
    <html>
      <head>
        <title> Hacked Genius </title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
        <link rel='stylesheet' href='main.css'>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
      </head>
      
      <body>

    <div id="Popup" class="Modal">
      <div class="content">
         <span id='login_title'> Welcome Back </span> <br>
         <form action='hi' method='post'>
         <input id='login_username' placeholder='Username' name='login_username'> <br> <br>
         <input id='login_password' placeholder='Password' name='login_password' type='password'> <br> <br>
         <input type='submit' value='Login' id='login_submit'>
         </form>
      	<span class="close"></div>
      </div>
    </div>

     <!-- nav -->
          <div id='nav'>
              <span id='nav_logo'> Logo </span>
              
              <!-- Search Engine -->
                <input id='search_engine' placeholder='Search Courses'>
              <!-- End of Search Engine -->
                
                <!-- Sign Up -->
                
                <a href='#' class='model_link2'> <div id='signup_nav_div'>
                  <span id='signup'> Sign Up </span>
                </div> </a>
                
                <!-- End of Sign Up -->
                
                  <!-- Login -->
              
               <a href="#Popup" class="button"> <div id='login_nav_div'>
                  <span id='login'> Login </span>
                </div> </a>
                
                <!-- End of Login -->
              
          </div>
        <!-- end of nav -->

      <script>
        $.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");
    });

    // Example Callbacks
    /*
    $("#Popup").on("expose:opened", function() {
      
      alert("Modal Opened!");
    });

    $("#Popup").on("expose:closed", function() {
      
      alert("Modal Closed!");
    });
    */
      </script>
      </body>

编辑@Arun P Johny

这就是我的代码现在的样子:

<script>
    $.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");
  });

  $modal.on("click", function(e) {
    if ($(e.target).is($modal) || $(e.target).is('.close')) {
      e.preventDefault();
      $modal.trigger("expose:close");
    }
  });

  $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");
});

// Example Callbacks
/*
$("#Popup").on("expose:opened", function() {

  alert("Modal Opened!");
});

$("#Popup").on("expose:closed", function() {

  alert("Modal Closed!");
});
*/
  </script>

这样对吗？

Answer 1

你的代码有两个问题

用于 $trigger 的选择器抛出错误 - 你有 VM736 jquery.js:1502 Uncaught Error: Syntax error, unrecognized expression: a[href=#Popup]在你的控制台

$trigger = $('a[href="' + this.selector + '"]')

$model 和 close 按钮的点击处理程序也阻止了提交按钮点击事件的默认操作

  $modal.on("click", function(e) { //instead of $modal.add($modal.find(".close")).on("click", function(e) {
    if ($(e.target).is($modal) || $(e.target).is('.close')) {
      e.preventDefault();
      $modal.trigger("expose:close");
    }
  });

演示:Fiddle