jquery - 如何在所有浏览器和所有设备的屏幕中央显示 Bootstrap 模态对话框？

Question

我正在使用 Bootstrap 模式对话框将一些信息显示到弹出窗口中，但我无法在屏幕中央显示此弹出窗口。我想在所有浏览器和所有设备的屏幕中央显示此弹出窗口。为此，我尝试了以下 CSS 代码，但没有成功:

.modal { 
  width: 100%;
  left: 0;
  background-color: transparent; }

.modal-body { 
  display: inline-block; 
  background-color: #FFF; }



.modal img { min-width: none!important; }

link 如果你想测试。

单击绿色“详细信息”按钮后，您将能够看到模式弹出窗口。我希望这个弹出窗口位于屏幕中央。

有人可以在这方面帮助我吗？

Answer 1

我建议尝试一下 Bootstrap Modal 扩展:

Extends the default Bootstrap Modal class. Responsive, stackable, ajax and more. — GitHub

几年前，居中、响应式模式对话框是我的一个元素的重要要求之一。所以我开始使用扩展并完全忘记了默认插件及其问题(例如背景滚动)。

这真的很容易install .查看现场演示 here .