同時單擊自舉

Question

按鈕莫代爾未顯示有一個在下面的代碼：

<div class="loginPanel"> 
    <div class="myFormContainer"> 
     <div class="myPanelHeadingContainer"> 
      <h3 class="myPanelTitle"> 
       Login 
      </h3> 
      <span id="flipper1"> 
       <a href="#">Register</a> 
      </span> 
     </div> 
     <div class="myPanelBody"> 
      <form id="loginForm"> 
       <div class="form-group"> 
        <label for="authCode">Authentication Code</label> 
         <input type="password" class="form-control" id="authCode" placeholder="Auth code" /> 
       </div> 
       <button type="submit" class="btn btn-default" data-toggle="modal" data-target="#loadingModal">Submit</button> 
      </form> 
     </div> 
    </div> 
</div> 
    <div class="registerPanel"> 
     <div class="myFormContainer"> 
      <div class="myPanelHeadingContainer"> 
       <h3 class="myPanelTitle"> 
        Register 
       </h3> 
       <span id="flipper2"> 
        <a href="#">Login</a> 
       </span> 
      </div> 
      <div class="myPanelBody"> 
       <form id="registerForm"> 
        <div class="form-group"> 
         <label for="firstName">First Name</label> 
         <input type="text" class="form-control" id="firstName" placeholder="Your name here" /> 
        </div> 
        <div class="form-group"> 
         <label for="newAuthCode">New Authentication Code</label> 
         <input type="password" class="form-control" id="newAuthCode" placeholder="New auth code" /> 
        </div> 
        <div class="form-group"> 
         <label for="clientSecret">Client Secret</label> 
         <input type="password" class="form-control" id="clientSecret" placeholder="Client secret" /> 
        </div> 
        <button type="submit" class="btn btn-default" data-toggle="modal" data-target="#loadingModal">Submit</button> 
       </form> 
      </div> 
     </div> 
    </div> 
    <div class="modal fade" id="loadingModal" tabindex="-1" role="dialog"> 
     <div class="modal-dialog modal-sm" role="document"> 
      <div class="modal-content"> 
       <div class="sk-fading-circle"> 
        <div class="sk-circle1 sk-circle"></div> 
        <div class="sk-circle2 sk-circle"></div> 
        <div class="sk-circle3 sk-circle"></div> 
        <div class="sk-circle4 sk-circle"></div> 
        <div class="sk-circle5 sk-circle"></div> 
        <div class="sk-circle6 sk-circle"></div> 
        <div class="sk-circle7 sk-circle"></div> 
        <div class="sk-circle8 sk-circle"></div> 
        <div class="sk-circle9 sk-circle"></div> 
        <div class="sk-circle10 sk-circle"></div> 
        <div class="sk-circle11 sk-circle"></div> 
        <div class="sk-circle12 sk-circle"></div> 
       </div> 
      </div> 
     </div> 
    </div> 

如，你可以see..the模式有望彈出時，點擊提交按鈕在兩種形式。但是當我點擊登錄表單中的提交按鈕時，沒有任何反應。我知道我犯了一些錯誤，因爲它在幾個小時後正常工作，然後我不知道我做錯了什麼，現在我的代碼完全破壞了。模態窗口顯示加載微調器。在上面的代碼中，您可以分別在每個表單中看到一個帶有文本註冊和登錄的錨元素。我不知道是否有必要，但我會解釋它的作用。我想隱藏登錄表單並在單擊註冊鏈接時顯示註冊表單。註冊表單中也有一個按鈕，它隱藏了自己的身份，並使登錄表單可視化。註冊表單上還有一個提交按鈕，點擊後會觸發模式。

正如我上面提到的，當單擊Login窗體中的提交按鈕時，模式不會彈出。但是，當我切換到註冊表單並單擊提交時，它會觸發模式。更有趣的是，當我切換回登錄表單並單擊提交時，它也會按預期顯示模式。總之，當URL更改爲myfile.php？＃時，一切正常，但是當它是myfile.php或myfile.php ?,我無法從登錄表單的提交按鈕中觸發Modal，而無需至少切換一次表單。

Answer 1

下面的代碼將啓動按鈕點擊模式窗口。
這不是讓你的邏輯工作的代碼，但這隻會彈出按鈕點擊模式窗口。使用
庫：的jQuery 2.1.1，3.3.7引導

<link rel="stylesheet" type="text/css" href="css/bootstrap.css" /> 
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong"> 
    Launch demo modal 
</button> 

<!-- Modal --> 
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
      <span aria-hidden="true">&times;</span> 
     </button> 
     </div> 
     <div class="modal-body"> 
     ... 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div> 
    </div> 
</div> 
<script type="text/javascript" src="js/jquery-2.1.1.js"></script> 
<script type="text/javascript" src="js/bootstrap.js"></script> 

參考：https://v4-alpha.getbootstrap.com/components/modal/

Answer 2

給予一定的時間來提交表單，並顯示出模態

你正在做的首先顯示模式，然後提交表格

function myFunction() 
 
{ 
 

 
    setTimeout(function(){ 
 
       
 
       $("#loginForm").submit(); // if you want    
 
      }, 2000); 
 

 

 
    return false; 
 

 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
    
 
    <div class="loginPanel"> 
 
    <div class="myFormContainer"> 
 
     <div class="myPanelHeadingContainer"> 
 
      <h3 class="myPanelTitle"> 
 
       Login 
 
      </h3> 
 
      <span id="flipper1"> 
 
       <a href="#">Register</a> 
 
      </span> 
 
     </div> 
 
     <div class="myPanelBody"> 
 
      <form id="loginForm" > 
 
       <div class="form-group"> 
 
        <label for="authCode">Authentication Code</label> 
 
         <input type="password" class="form-control" id="authCode" placeholder="Auth code" /> 
 
       </div> 
 
       <button onclick="return myFunction();" class="btn btn-default" data-toggle="modal" data-target="#loadingModal">Submit</button> 
 
      </form> 
 
     </div> 
 
    </div> 
 
</div> 
 
    
 
    <div class="modal fade" id="loadingModal" tabindex="-1" role="dialog"> 
 
     <div class="modal-dialog modal-sm" role="document"> 
 
      <div class="modal-content"> 
 

 
      loading 
 

 
      </div> 
 
     </div> 
 
    </div> 
 
    
 
    </div> 
 

 
</body> 
 
</html>