Модаль открывается, но не закрывается?

У меня проблемы с модальным, он открывается при загрузке и не отвечает на клики, чтобы закрыть его. Не уверен, в чем проблема. Прикрепленный код, который у меня есть. Как мне сделать модальное открытым, как я нажимаю кнопку и закрыть, когда я нажимаю хМодаль открывается, но не закрывается?

<html lang="en"> 
<head> 

    <meta chart="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewort" content="width=device-width, intial-scal=1"> 
    <link rel="stylesheet" href="css/bootstrap.min.css"> 
    <link rel="stylesheet" href="css/style.css"> 
    <script src="js/bootstrap.min.js"></script> 

    <title>Bootstrap</title> 
</head> 

<body> 

<!-- signup button --> 
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#signupform"> 
Signup 
</button> 

<!-- log in button 
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#loginform">Login</button> --> 

<!-- popup signup form--> 
<div class="modal-fade" id="signupform"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 

      <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal"> 
       <span> 
       &times; 
       </span> 
      </button> 
      <h4 class="modal-title"> Sign Up</h4> 
      </div> 

      <div class="modal-body"> 

       <form class="form-horizontal"> 
        <div class="form-group"> 
         <label class="col-md-4 col-md-offset-1"> 
         First Name: 
         </label> 
         <div class="col-md-5"> 
         <input type="text" class="form-control input-sm"> 
         </div> 
        </div> 

        <div class="form-group"> 
         <label class="col-md-4 col-md-offset-1"> 
         Last Name: 
         </label> 
         <div class="col-md-5"> 
         <input type="text" class="form-control input-sm"> 
         </div> 
        </div> 

        <div class="form-group"> 
         <label class="col-md-4 col-md-offset-1"> 
         Email: 
         </label> 
         <div class="col-md-5"> 
         <input type="email" class="form-control input-sm"> 
         </div> 
        </div> 

        <div class="form-group"> 
         <label class="col-md-4 col-md-offset-1"> 
         Password: 
         </label> 
         <div class="col-md-5"> 
         <input type="password" class="form-control input-sm"> 
         </div> 
        </div> 

        <div class="form-group"> 
         <label class="col-md-4 col-md-offset-1"> 
         Confirm Password: 
         </label> 
         <div class="col-md-5"> 
         <input type="password" class="form-control input-sm"> 
         </div> 
        </div> 

        <div class="form-group"> 
         <div class="col-md-2 col-md-offset-8"> 
         <input type="submit" class="btn btn-success" value="submit"> 
         </div> 
        </div> 

       </form> 

      </div> 
      <div class="modal-footer"></div> 
     </div> 
    </div> 


</div> 

    <script src="js/jquery-2.2.0.min.js"></script> 
    <script src="js/script.js"></script> 
</body> 

</html>

источник

2016-02-10 Eyad Abdalla

Bootstrap должен быть загружен после JQuery. В настоящее время bootstrap загружается в '' и jQuery в конце '', всплывающее окно не должно даже открываться. – Tushar

Я пробовал, но все равно безрезультатно –

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous"> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script> 
 

 
<!-- Button trigger modal --> 
 
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
 
    Launch demo modal 
 
</button> 
 

 
<!-- Modal --> 
 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     ... 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     <button type="button" class="btn btn-primary">Save changes</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

исх: getbootstrap.com/javascript/#modals

источник

2016-02-10 03:25:07

Модаль открывается, но не закрывается?

ответ

Смежные вопросы