CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap-3
TerraElysio
TerraElysio

Reputation: 13

Image opens modal dialog bootstrap

Soooo I want to use these images I have so that when they are clicked it opens a modal dialog for a staff page on my site and I'm not sure how to do it

PS: I have seen something like this on here but its not what I wanted

<img src="https://minotar.net/helm/EpicMinerBackup">
<img src="https://minotar.net/helm/kingpooper27s">

EDIT~~~: Resolution to issue ~~~EDIT END~~

<!--####################### Start of the staff list ############################### -->
<img src="https://minotar.net/helm/EpicMinerBackup" data-toggle="modal" data-target="#Staff1" />

<div class="modal fade" id="Staff1" tabindex="-1" role="dialog" aria-labelledby="StaffModalLabel1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">&times;</span>
          <span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title" id="StaffModalLabel1">EpicMinerBackup</h4>
      </div>
      <div class="modal-body">
        The Owner of the site and server.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<!--########################################################################## -->

Upvotes: 0

Views: 216

Answers (1)

zveljkovic
zveljkovic

Reputation: 444

You can use data attributes to load the modal box. img href value should match modal id value prefixed with #. In case below its #myModal. If it still doesn't work check JS errors or if the bootstrap js files are loaded. 

<img href="#myModal" data-toggle="modal" src="https://minotar.net/helm/EpicMinerBackup">
<div id="myModal" class="modal fade" 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">×</button>
            <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…</p>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary">Save changes</button>
    </div>
</div>
</div>
</div>

Here is the link for sample http://www.bootply.com/TH49jSYRm6

Upvotes: 1

Related Questions