Bootstrap Modal Element Not Working

Question

Я пытаюсь использовать модальный при нажатии на изображение. Изображение находится внутри кнопки. Я скопировал код с сайта Bootstrap, но ничего не работает. Я связал bootstrap.css и bootstrap.min.js в начале моего html-документа. Пожалуйста, помогите!

<div class="col-xs-6 col-md-4"> 
     <button type="button" data-toggle="modal" data-target="#myModal"> 
     <h4>SHORT SLEEVED SHIRT<br><br>$20</h4> 
     <img src="images/femaleshortsleeved.jpg"> 
     </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> 
</div> 

Answer 1

Как указано в Bootstrap documentation, вам необходимо включить JQuery.

JQuery требуется

Пожалуйста, обратите внимание, что все плагины JavaScript требуют Jquery быть включены, как показано в шаблоне стартера

отметить также, что вам необходимо включить его перед тем в Загрузочный Javascript-файл.

Вот пример вашего кода работы:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 

 
<div class="col-xs-6 col-md-4"> 
 
    <button type="button" data-toggle="modal" data-target="#myModal"> 
 
    <h4>SHORT SLEEVED SHIRT<br><br>$20</h4> 
 
    <img src="images/femaleshortsleeved.jpg"> 
 
    </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> 
 
</div>