Bootstrap 图片弹出窗口

Question

我正在使用Bootstrap，并且有一个按钮：

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

我在同一目录下有一张图片，希望能够以某种浮层形式弹出，而且背景为灰色（如果可能的话）。我习惯于使用javascript，在普通情况下会使用onclick并调用一个函数来完成。但是在Bootstrap中，我不确定该如何操作。谢谢。

- user3443195

---

这个对你有帮助吗：http://getbootstrap.com/javascript/#modals？ - Ionică Bizău

Answer 1

你可以像这样做...

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

演示：http://www.bootply.com/123443

- Zim

---

如何使模态框居中显示在屏幕中央？ - Thom

它应该居中显示。演示对你来说没有居中显示吗？ - Carol Skelly

是的，水平的，但不是垂直的。 - Thom

@Skelly 的回答很棒，评论中也有后续。 - Steven Almeroth

这是另一个帮助我创建灯箱效果的例子：here。 - Shaiju T