Bootstrap modal fade происходит, но не всплывает

Я пытаюсь написать модаль, который появляется при представлении учетных данных для входа (в конечном итоге я хочу использовать ajax для проверки на сервере ldap и поп модальности на основе членства в группе, но не там еще).Bootstrap modal fade происходит, но не всплывает

Когда я открываю это в браузере и нажимаю кнопку, контейнер исчезает до темноты, как следует, но фактический модальный div не появляется.

<!doctype html> 
<html lang="en"> 
<head> 
    <title>PSSST</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel=stylesheet type=text/css href="./static/style.css"> 
    <script type=text/javascript src="./static/jquery.min.js"></script> 
    <link rel="stylesheet" type=text/css href="./static/bootstrap.min.css"> 
    <script type=text/javascript src="./static/bootstrap.min.js"></script> 
</head> 


<body class=body> 
<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container-fluid"> 
     <div> 
      <ul class="nav navbar-nav"> 
       <li class="active"><a href="/landing">Home</a></li> 

        <li><a href="/">Login</a></li> 

      </ul> 
     </div> 
    </div> 
</nav> 

<div class=page> 
    <div class="container"> 
     <div class="row top-buffer"> 
      <div class="form_bg"> 
       <form id="loginForm"> 
        <h2 class="text-center">Login Page</h2> 
        <br/> 
        <div class="form-group"> 
         <input type="text" class="form-control" id="username" 
         name="username" placeholder="Username"> 
        </div> 
        <div class="form-group"> 
         <input type="password" class="form-control" 
               id="password" 
         name="password" placeholder="Password"> 
        </div> 
        <br/> 
        <div class="align-center"> 

        </div> 
        <div class="align-center"> 
         <button class="btn btn-default" 
               id="login" data-toggle="modal" 
               data-target="#myModal">Login</button> 
        </div> 
       </form> 
      </div> 
     </div> 
     <div class="modal fade" id="myModal" role="dialog"> 
      <div class="modal dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
       </div> 
       <div class="modal-body"> 
        <p>MODAL</p> 
       </div> 
       <div class="modal-footer"> 
       </div> 
      </div> 
      </div> 
     </div> 
    </div> 
</div> 
</body>

источник

2016-01-11 tadamhicks

Вы неправильно набранный' модальный-dialog', вы Отсутствует черточка. Если вы исправите это, он должен работать – VincenzoC

: facepalm. Спасибо за это. – tadamhicks

Вы должны добавить role="document "в <div class="modal-dialog" >

Это должно быть, как это

<div class="modal-dialog modal-lg" role="document">

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <title>PSSST</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.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 
    <!-- Optional theme --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 
 
    <!-- Latest compiled and minified JavaScript --> 
 
    <script src="http://code.jquery.com/jquery-2.2.0.min.js" ></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
 

 
</head> 
 

 

 
<body class=body> 
 
<nav class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container-fluid"> 
 
     <div> 
 
      <ul class="nav navbar-nav"> 
 
       <li class="active"><a href="/landing">Home</a></li> 
 

 
        <li><a href="/">Login</a></li> 
 

 
      </ul> 
 
     </div> 
 
    </div> 
 
</nav> 
 

 
<div class=page> 
 
    <div class="container"> 
 
     <div class="row top-buffer"> 
 
      <div class="form_bg"> 
 
       <form id="loginForm"> 
 
        <h2 class="text-center">Login Page</h2> 
 
        <br/> 
 
        <div class="form-group"> 
 
         <input type="text" class="form-control" id="username" 
 
         name="username" placeholder="Username"> 
 
        </div> 
 
        <div class="form-group"> 
 
         <input type="password" class="form-control" 
 
               id="password" 
 
         name="password" placeholder="Password"> 
 
        </div> 
 
        <br/> 
 
        <div class="align-center"> 
 

 
        </div> 
 
        <div class="align-center"> 
 
         <button 
 
         id="login" 
 
         data-toggle="modal" data-target="#myModal">Login</button> 
 

 

 
        </div> 
 
       </form> 
 

 
       <div class="modal fade" id="myModal" tabindex="-1" role="dialog" > 
 
         <div class="modal-dialog modal-lg" 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">Product Setting</h4> 
 
           </div> 
 
          <div class="modal-body"> 
 

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

 

 
    </div> 
 
</div> 
 
</body> 
 
</html> 
 
<script> 
 
     $('#login').click(function(event) { 
 
event.preventDefault(); }); 
 
</script>

источник

2016-01-11 19:51:52

Bootstrap modal fade происходит, но не всплывает

ответ

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