Bootstrap 3 Modal (изображение лайтбокс)

Question

Я просмотрел различные примеры (которые работают), а также просмотрел мой собственный код. Я не совсем уверен, но по какой-то причине я не вижу, что я делаю неправильно. Мне может понадобиться еще один человек, чтобы посмотреть на меня и сказать, что я глуп. Что мне не хватает?

JS Fiddle: http://jsfiddle.net/yv47nek3/

кода (с помощью HTML атрибутов данных):

<div class="col col-md-6"> 
    <figure> 
    <a data-toggle="modal" data-target="myModal1" href="#"> 
     <img src="http://placehold.it/150" class="img-responsive img-rounded center-block" aria-describedby="year6saratogareads.500x320.jpg1476812731"> 
    </a> 
    <figcaption id="year6saratogareads.500x320.jpg1476812731" class="text-center">Image Description</figcaption> 
    </figure> 
</div> 
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1"> 
    <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">×</span> 
     </button> 
     <h4 class="modal-title" id="myModalLabel1">Image 1</h4> 
     </div> 
     <div class="modal-body"> 
     <img src="http://placehold.it/500"> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div> 
    </div> 
</div> 

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

Answer 1

Кажется, что в документах Bootstrap есть опечатка. Для целевого объекта данных должно быть #, чтобы идентифицировать атрибут HTML-идентификатора.

Найдено с помощью: bootstrap 3 modal window not working

Там еще одна проблема здесь, и это, видимо, в том, что если модальное активируется по ссылке, и что ссылка содержит что-то в HREF тега, Bootstrap пытается загрузить связанные данные, чтобы тело модального (игнорируя цель данных). Это в конечном итоге пытается отобразить (в данном случае) двоичные данные в среде ascii. Несколько раз он разбивал мой браузер при загрузке/конвертировании.

Чтобы использовать только атрибуты HTML-данных, необходимо удалить HREF тега привязки (отключить резервную копию, если JS разрывается или недоступен для пользователя). В противном случае JS необходимо использовать вместо атрибутов данных для активации модальности.