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分机：

扩展默认的Bootstrap Modal类。响应，可堆叠，ajax等。 - GitHub

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

install真的很容易。查看实时演示here。

Answer 2

尝试从索引中删除这些行。看看发生了什么。

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

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

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

Answer 3

试试这个

$(".modal").css({
'margin-top': function () { //Vertical centering
    return -($(this).height() / 2);
},
'margin-left': function () { //Horizontal centering
    return -($(this).width() / 2);
}
});

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

3 个答案: