Javascript 引导映像弹出窗口

我正在使用引导并有一个按钮：

 <button type="button" class="btn btn-primary">Popup image</button>

弹出图像

---

我在同一个目录下有一个图像，如果可能的话，我想让它在背景为灰色的某种叠加中弹出。我习惯使用javascript，所以通常会执行类似于onclick的操作，并调用一个可以执行该操作的函数。但在bootstrap中，我不确定如何做到这一点。谢谢你，你可以这样做

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Popup image</button>

<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-body">
            <img src="//placehold.it/1000x600" class="img-responsive">
        </div>
    </div>
  </div>
</div>

弹出图像

---

演示：

这对您有帮助吗：？如何将模式置于屏幕中央？它应该居中。演示不以您为中心？是的，水平，但不是垂直伟大的答案@Skelly，以及后续评论。是另一个帮助我创建灯箱效果的例子