Question

Soooo我想使用这些图片，以便点击它们时会打开我网站上工作人员页面的模态对话框，我不知道该怎么做

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

＆＃13;

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

＆＃13;

编辑~~~：解决问题~~~编辑结束~~

＆＃13;

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

＆＃13;

Answer 1

您可以使用数据属性加载模式框。 img href值应该与前缀为＃的模态id值匹配。如果低于其#myModal。如果仍然无法检查JS错误或是否加载了bootstrap 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

图像打开模态对话框引导程序

1 个答案: