图像打开模式对话框启动

Question

太好了，我想使用这些图片，以便在单击它们时为我的工作人员页面打开一个模式对话框，但我不确定该怎么做

PS：我在这里看到了类似的东西，但不是我想要的

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

编辑~~~：发出决议~~~编辑结束~~

 <!--####################### 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> <!--########################################################################## --> 

Answer 1

您可以使用数据属性加载模式框。 img href值应与以＃开头的模式ID值匹配。 如果低于其#myModal。 如果仍然无法正常工作，请检查JS错误或是否加载了引导js文件。

<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>

这是示例http://www.bootply.com/TH49jSYRm6的链接