像bootstrap模态一样，在body中聚焦任何特定的div

Question

我用boostrap设计了一个页面。

我的意图是在正文中集中一个div，其他一切都应该变成灰色或类似于Bootstrap Modal的任何东西。当我应用背景色为灰色的div时，它也会与焦点div重叠…

小提琴: here.

CSS::

    .infocus
{
z-index: 1050;
background-color: #ffffff;
border: 1px solid #999;
border: 1px solid rgba(0, 0, 0, 0.3);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
outline: none;
}

这是我尝试过的小提琴，我已经复制了上述目的的引导类。有没有其他的方法来显示特定的div

Answer 1

如果你想使用CSS的z-index属性，你必须有position属性设置为static以外的东西(http://css-tricks.com/almanac/properties/z/z-index/)。这是您的小提琴的更新，工作版本:http://jsfiddle.net/DBkWu/

实际上，我将position: absolute添加到您的.infocus类中:

.infocus
{
    position: absolute;
    z-index: 1050;
    background-color: #ffffff;
    border: 1px solid #999;
    border: 1px solid rgba(0, 0, 0, 0.3);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding-box;
    background-clip: padding-box;
    outline: none;
}