Modal bootstrap, image instead of a button

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

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

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

boot 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 --> 
+6
source share
2 answers

You can put an image inside such a link ...

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

Demo: http://bootply.com/98748

+12
source

You can leave the HTML button and add a background image in CSS. See an example in this question fooobar.com/questions/308106 / ....

0
source

Source: https://habr.com/ru/post/959379/


All Articles