2013-12-07 3 views
1

Я просто пытаюсь показать образец учебника для модального отображения. У меня есть точный код из учебника, и мои ссылки на файлы верны. Я даже пытался добавить javascript modal.show.Bootstrap modal не отображается

<!doctype html> 
<html lang="en"> 
<head> 
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> 
<script type="text/javascript" src="js/bootstrap.min.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"> </script> 

</head> 
<body> 

<!-- Button trigger modal --> 
<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" aria-hidden="true"> 
<div class="modal-dialog"> 
<div class="modal-content"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;  </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><!-- /.modal-content --> 
</div><!-- /.modal-dialog --> 
</div><!-- /.modal --> 

</body> 
    </html> 

ответ

2

Попробуйте загрузить файл js/bootstrap.min.js после jquery-файлов.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"> </script> 
<script type="text/javascript" src="js/bootstrap.min.js"></script> 
+0

О человеке, который сделал это .. Чем вы. – ThingWings

+0

+1 Ударьте меня ровно на 10 секунд! – think123

1

bootstrap.min.js требует, чтобы jQuery работал правильно.

Здесь я убирала свой код и исправили ошибку (возможно):

<!doctype html> 
<html lang="en"> 
    <head> 
     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
     <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> 
     <script type="text/javascript" src="js/bootstrap.min.js"></script> 
    </head> 

    <body> 
     <!-- Button trigger modal --> 
     <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" aria-hidden="true"> 
      <div class="modal-dialog"> 
       <div class="modal-content"> 
        <div class="modal-header"> 
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</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> 
       <!-- /.modal-content --> 
      </div> 
      <!-- /.modal-dialog --> 
     </div> 
     <!-- /.modal --> 
    </body> 

</html> 
Смежные вопросы