css - 以透明背景居中 IE9 模态框，为什么需要相对位置？

Question

背后的故事...... 我正在为 AngularJS 创建一个模态指令，该指令应采用任何**内容并将其显示在具有灰色透明背景的页面中心。听起来应该很简单。它工作正常，直到使用 IE9 进行测试，IE9 是我们唯一需要支持的浏览器。它是一个内部站点。我有一个 fiddler使用它在垂直和水平方向上居中，可能可以稍微清理一下。我假设它会正常工作，我现在正在使用 Mac。

modal 的 html 需要在固定在页面底部的页脚中。所以

所以我有两个问题。

1st- 我在设置灰色透明背景的时候发现需要设置相对位置。 为什么需要这个？ fiddler

.dialogbox-wrapper{
z-index:1000;
display: table-cell;
vertical-align: middle;
/* When this isnt included this has the opacity */
position:relative;

2nd- 我们正在使用 less 和 CSS3。有更清洁的方法吗？

这是我需要的 -

在任何人建议 !doctype HTML 之前，它就在那里。

Answer 1

关于#1

对于 z-index要获得荣誉，元素必须具有 position某种。如果position: relative简单删除，则默认static位置不识别 z-index: 1000所以灰色框的z-index: 50将您的“背景”置于前台。

关于#2

“清洁工”可以是相对的。这是一个 modified version of your fiddle无需 min-width 即可将其居中(您在想要消除的符号中表示)，使用 display: inline-block容器设置为 text-align: center (在元素本身上重置)。它还设置了 <a> “接近”display: block 的元素这样你的width: 200px实际上做了一些事情( anchor 通常是一个内联元素，它不支持宽度)。当然现在200px对于 .row正在驱动模态显示的宽度。

这对我来说都适用于 IE9。