부트 스트랩 모달이 로그인 창을 표시하지 않습니다.

Question

부트 rap 프를 사용하여 로그인 모달을 표시하는 방법은 수행해야하지만 여전히 표시되지 않습니다.

부트 스트랩 링크 :

<link href="css/bootstrap.css" rel="stylesheet" /> 
<link href="css/bootstrap.min.css" rel="stylesheet" /> 
<script type="text/javascript" src="js/jquery-3.1.1.js"></script> 
<script type="text/javascript" src="js/bootstrap.min.js"></script> 
<script type="text/javascript" src="js/bootstrap.js"></script> 

모달 스타일링 : 그래서 링크가 포함

<style> 
.modal-header, h4, .close { 
    background-color: #5cb85c; 
    color: white !important; 
    text-align: center; 
    font-size: 30px; 
} 

.modal-footer { 
    background-color: #f9f9f9; 
} 
</style> 

탐색 바

enter code here 

어떻게이 모달 아래 코드 주어진 표시 할 수 있도록 할 로그인 모드를 표시하는 방법 :

로그인 모달를 들어 6,

<nav class="navbar navbar-default "> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
       <a class="navbar-brand" href="#"> </a> 
      </div> 
      <div> 
       <ul class="nav navbar-nav"> 
        <li class="active"><a href="#">Home</a></li> 
        <li><a href="#">Departments</a></li> 
        <li><a href="#">Clubs & Sports</a></li> 
        <li><a href="#">Contact US</a></li> 
        <li><a data-toggle="modal" href="#login">Login</a></li> 
       </ul> 
       <ul class="nav navbar-nav navbar-right"> 
        <li><a href="register.php"><img alt="" src="images/person2.png"> 
          Sign Up</a></li> 
        <li><a href="#"><img alt="" src="images/login2.png">Login</a></li> 
       </ul> 
      </div> 
     </div> 
    </nav> 

컨테이너 :

<div class="container"> 

     <div class="modal fade" id="login" role="dialog"> 
      <div class="modal-dialog"> 

       <!-- Modal content--> 
       <div class="modal-content"> 
        <div class="modal-header" style="padding: 35px 50px;"> 
         <button type="button" class="close" data-dismiss="modal">&times;</button> 
         <h4> 
          <span class="glyphicon glyphicon-lock"></span> Login 
         </h4> 
        </div> 
        <div class="modal-body" style="padding: 40px 50px;"> 
         <form role="form"> 
          <div class="form-group"> 
           <label for="usrname"><span class="glyphicon glyphicon-user"></span> 
            Username</label> <input type="text" class="form-control" 
            id="usrname" placeholder="Enter email"> 
          </div> 
          <div class="form-group"> 
           <label for="psw"><span class="glyphicon glyphicon-eye-open"></span> 
            Password</label> <input type="text" class="form-control" 
            id="psw" placeholder="Enter password"> 
          </div> 
          <div class="checkbox"> 
           <label><input type="checkbox" value="" checked>Remember me</label> 
          </div> 
          <button type="submit" class="btn btn-success btn-block"> 
           <span class="glyphicon glyphicon-off"></span> Login 
          </button> 
         </form> 
        </div> 
        <div class="modal-footer"> 
         <button type="submit" class="btn btn-danger btn-default pull-left" 
          data-dismiss="modal"> 
          <span class="glyphicon glyphicon-remove"></span> Cancel 
         </button> 
         <p> 
          Not a member? <a href="#">Sign Up</a> 
         </p> 
         <p> 
          Forgot <a href="#">Password?</a> 
         </p> 
        </div> 
       </div> 

      </div> 
     </div> 

자바 스크립트 로그인 모달을 사용하는 코드 : 자바 스크립트들이이 없기 때문에 존재하지 않는 요소를 해결하기 위해 노력하고있다

<script> 
$(document).ready(function(){ 
    $("#login").click(function(){ 
     $("#myModal").modal(); 
    }); 
}); 
</script> 

Answer 1

id 또는 잘못된 id.

시도해보십시오.

모달을 가져 오는 링크에 id를 추가하십시오.

<li><a href="#" id="loginLink"><img alt="" src="images/login2.png">Login</a></li> 

이 것은 필수 사항은 아니지만 모달 ID를보다 구체적으로 변경하는 것이 좋습니다.

<div class="modal fade" id="loginModal" role="dialog"> 

이제 올바른 요소를 처리하도록 JavaScript를 조정하십시오.

$(document).ready(function(){ 
    $("#loginLink").click(function(){ 
     $("#loginModal").modal(); 
    }); 
});