Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Modal bootstrap, image instead of button

I try to use modal from bootstrap, but instead of a button i would like to use an image. But i don't see at all how to do it. And where to insert

data-toggle="modal" data-target="#myModal

http://getbootstrap.com/javascript/#modals

bootstrap modal

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</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><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
like image 770
2ueenO Avatar asked Dec 05 '13 12:12

2ueenO


People also ask

Can you put an image in a modal?

Modal can consist of any content along with a header and footer. Images can be fitted in modal popup using Bootstrap by including <img> tag in the “modal-body” div. The “modal-body” div determines the main content of modal popup. By using the <img> tag, an image can be inserted into it.

Does a modal have to be a button?

Yes a bootstrap modal can be used without a button.

How can I open popup without click button?

Opening Bootstrap Modal Popup without Button Click onload event handler, the OpenBootstrapPopup JavaScript function is called which first references the HTML DIV using jQuery and then calls the Bootstrap modal function which displays the Bootstrap Modal Popup.

How do I make Bootstrap modal not close on click outside?

By default, dialog can be closed by pressing Esc key and clicking the close icon on the right of dialog header. It can also be closed by clicking outside of the dialog using hide method. Set the closeOnEscape property value to false to prevent closing of the dialog when pressing Esc key.


1 Answers

You can place the image inside a link like this...

<a data-toggle="modal" data-target="#myModal">
  <img src="//placehold.it/100x30">
</a>

Demo: http://bootply.com/98748

like image 127
Zim Avatar answered Sep 21 '22 05:09

Zim