ブートストラップモーダルログインフォームがすぐに消えますか？

私はユーザーがログインできるモーダルフォームを作成しています。「ログイン」をクリックすると、モーダルフォームが表示され消えます。ブートストラップモーダルログインフォームがすぐに消えますか？

ここには、モーダルフォームを呼び出すボタンがあります。それは私のナビゲーションバーの一部です：

<li><a href=#myModal data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>

モーダルボディ：あなたは二回ブートストラップモーダルのためにJavaScriptをロードすることができるように

<div class="modal fade" id="myModal" tableindex='-1'> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
       <h4 class="modal-title">Log-in</h4> 
      </div> 
      <div class="modal-body"> 
       <div class="form-group"> 
        <label for="exampleInputEmail1">Email address</label> 
        <input class="form-control" id="exampleInputEmail1" placeholder="Enter email" type="email"> 
       </div> 
       <div class="form-group"> 
        <label for="exampleInputPassword1">Password</label> 
        <input class="form-control" id="exampleInputPassword1" placeholder="Password" type="password"> 
       </div> 
      </div> 
      <div class="modal-footer"> 
       <a href="#" data-dismiss="modal" class="btn">Close</a> 
       <a href="#" class="btn btn-primary">Log-in</a> 
      </div> 
     </div> 
    </div> 
</div>

出典

2017-03-18 smithzerland

このコードは、jsBinに私のために動作します。

<!DOCTYPE html> 
 
    <html> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <meta name="viewport" content="width=device-width"> 
 
     <title>JS Bin</title> 
 
    <script src="https://code.jquery.com/jquery.min.js"></script> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
    </head> 
 
    <body> 
 
     <li><a href=#myModal data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> 
 
     
 
    <div class="modal fade" id="myModal" tableindex='-1'> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
 
     <h4 class="modal-title">Log-in</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <div class="form-group"> 
 
       <label for="exampleInputEmail1">Email address</label> 
 
       <input class="form-control" id="exampleInputEmail1" placeholder="Enter email" type="email"> 
 
      </div> 
 
      <div class="form-group"> 
 
       <label for="exampleInputPassword1">Password</label> 
 
       <input class="form-control" id="exampleInputPassword1" placeholder="Password" type="password"> 
 
      </div> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <a href="#" data-dismiss="modal" class="btn">Close</a> 
 
     <a href="#" class="btn btn-primary">Log-in</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    </div> 
 
    </body> 
 
    </html>

出典

2017-03-19 00:11:07 Programmer

おかげで、私はに持っていたものは混乱だったと私はページに保つためにどのスクリプトやリンク確認されませんでした。 – smithzerland

が鳴ります。あなたはおそらくbootstrap.jsなどブートストラップ・modal.jsをロードしていますか？または両方bootstrap.jsとbootstrap.min.js？

出典

2017-03-18 23:22:15 Chris

ブートストラップモーダルログインフォームがすぐに消えますか？

答えて

関連する問題