Bootstrap image popup

Question

I am using bootstrap and have a button:

 <button type="button" class="btn btn-primary">Popup image</button>

I have an image on the same directory and would like to have it popup in some kind of overlay where the background is grey if that is possible. I am used to javascript, so normally would do something like onclick and call a function that would do it. But in bootstrap I am unsure of how to do this. Thank you

Is this helpful for you: http://getbootstrap.com/javascript/#modals ? — Ionică Bizău, Mar 20 '14 at 17:21

score 35 · Accepted Answer · answered Mar 20 '14 at 17:37

35

You can do something like this..

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Popup image</button>

<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-body">
            <img src="//placehold.it/1000x600" class="img-responsive">
        </div>
    </div>
  </div>
</div>

Demo: http://www.bootply.com/123443

answered Mar 20 '14 at 17:37

Carol Skelly

351,302
90
710
624

How do you get the modal in the center of your screen? – Thom May 05 '14 at 11:34
It should be centered. The demo is not centered for you? – Carol Skelly May 05 '14 at 11:41
Yes, horizontal, but not vertical – Thom May 05 '14 at 12:11
Great answer @Skelly, and followup in comments as well. – Steven Almeroth May 26 '15 at 00:08
[here](http://stackoverflow.com/questions/25023199/bootstrap-open-image-in-modal) is another example which helped me to `create light box effect` – Shaiju T Jun 25 '15 at 13:18

Bootstrap image popup

1 Answers1