fancybox形式の問題

-1

参考：hereを参照してください。5.ログインフォームを表示します。fancybox形式の問題

今すぐ試してみてください。

ファンシーボックスは名前とパスワードで開く必要があります。
両方のフィールドが空白でログインをクリックすると、エラーのメッセージが表示されます。
名前とパスワードを入力すると、fancyboxに同じ名前が表示されます。

以下のコードでは、2番目と3番目のポイントは機能しません。私のコードで何が間違っていますか？

<html> 
    <head> 

     <link rel="stylesheet" type="text/css" href="fancybox-master/dist/jquery.fancybox.min.css"> 

     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
     <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 

     <script src="fancybox-master/dist/jquery.fancybox.min.js"></script> 
     <script type = "text/javascript"> 
      $("#tip5").fancybox({ 
      'scrolling'  : 'no', 
      'titleShow'  : false, 
      'onClosed'  : function() { 
       $("#login_error").hide(); 
      } 
     }); 

     </script> 

     <script> 

     $("#login_form").on("submit", function() { 

    if ($("#login_name").val().length < 1 || 
    $("#login_pass").val().length < 1) { 
      $("#login_error").show(); 
      $.fancybox.resize(); 
      return false; 
     } 

     $.fancybox.showActivity(); 

     $.ajax({ 
      type  : "POST", 
      cache : false, 
      url  : "/data/login.php", 
      data  : $(this).serializeArray(), 
      success: function(data) { 
       $.fancybox(data); 
      } 
     }); 

     return false; 
    }); 
      </script> 

     </head> 

     <body> 

       <a data-fancybox id="tip5" title="Login" href="#login_form">Try now</a> 
       <div style="display:none"> 
       <form id="login_form" method="post" action=""> 
        <p id="login_error">Please, enter data</p> 
       <p> 
        <label for="login_name">Login: </label> 
        <input type="text" id="login_name" name="login_name" size="30" /> 
       </p> 
       <p> 
        <label for="login_pass">Password: </label> 
        <input type="password" id="login_pass" name="login_pass" size="30" /> 
       </p> 
       <p> 
        <input type="submit" value="Login" /> 
       </p> 
       <p> 
        <em>Leave empty so see resizing</em> 
       </p> 
     </form> 
    </div> 
     </body> 
    </html>

出典

2017-10-28 Krishna

は（私は$（ "＃のlogin_form入力[タイプは= '提出']"）、。上（ "クリック" 機能を試してみました、 $("#login_form input[type='submit']").on("click", function() { の代わりに、ご返信用 $("#login_form").on("submit", function() {

出典

2017-10-28 20:53:59 lijnam

感謝してみてください）{（ "＃login_form"の代わりに$（ "＃login_form"）。on（ "submit"、function（）{ ）効果は同じです可能であれば、最後にお試しください。 – Krishna

http：// jsfiddle。 net/vdffkrLo/ fancybox 3が使用されています – lijnam

上記のコードをjsfiddleであなたが言いましたが、何も問題はありません送信ボタンのクリックでens。試したブラウザはクロムとエッジです。また、なぜあなたは最初のスクリプト（$（ "＃tip5"）.jsfiddleで書いたコードのfancybox（{）を入力しなかったのですか？ – Krishna

答えて

関連する問題