Bootstrap 3 Modal (image lightbox)

Question

I've looked over the various examples (which work) and have also looked over my own code. I'm not entirely sure, but for whatever reason I can't see what I'm doing wrong. I may need another person just to look it over for me and tell me I'm stupid. What am I missing?

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

Code (Using HTML data attributes):

<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>

Like in the Fiddle, the Bootstrap CSS and JS are present. Clicking on the image does not seem to open up the modal, however. Modals in Bootstrap are so simple I'm not entirely sure how I messed it up. Help?

score 0 · Accepted Answer · edited May 23 '17 at 12:17

It seems there's a typo in the Bootstrap docs. The data-target needs to have a # to identify the HTML ID attribute being targeted.

Found via: bootstrap 3 modal window not working

There's yet another issue here, and it apparently is that if a modal activated from a link, and that link contains something in the HREF tag, Bootstrap attempts to load the linked data in to the body of the modal (ignoring the data-target). This ends up trying to display (in this case) binary data in an ascii medium. It crashed my browser a few times while loading/converting.

To only use HTML data-attributes, the HREF of the anchor tag must be removed (disabling a backup in case the JS breaks or isn't available to the user). Otherwise, JS must be used in place of data-attributes to activate the modal.

Bootstrap 3 Modal (image lightbox)

1 Answers1