CODEWITHSUNDEEP
javascripttwitter-bootstrappopup
user3443195
user3443195

Reputation: 133

Bootstrap image popup

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

Upvotes: 13

Views: 66800

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362430

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

Upvotes: 35

Related Questions