jquery - 如何使元素的底部变暗？

Question

我想显示一个 div 元素，它的 z-index 为 1050。所以我想为它下面的所有元素制作一个黑暗的外观；像这张图片中的东西:

这是我要显示的 div 元素:

<div data-role="dialog" id="dlg" data-close-button="true" data-windows-style="true" data-overlay="true" data-overlay-color="op-dark" style="position: fixed;float: left;z-index: 1050;left: 0px;right: 0px;top: 310px;box-shadow: 0px 0px 5px 0px;">
    <div class="container">
        <h2><?php echo _getText('global.dialog.titre.conf'); ?></h2>
        <p>
            <span id="dlg_msg"></span><span class="place-right"><button id="dlg_oui" class="button default" style="margin-right: 5px;"><?php echo _getText('global.oui'); ?></button><button id="dlg_non" class="button default"><?php echo _getText('global.non'); ?></button></span>
        </p>
    </div>
</div>

那么如何在显示div时使暗色呢？

Answer 1

假设您尝试预先搜索此内容但找不到:您应该搜索的术语是模态，一种通常伴随褪色的浏览器内弹出窗口背景。

这里给出了一个非常好的解释，以及如何实现这一点的变体: http://tympanus.net/codrops/2013/11/07/css-overlay-techniques/

基本上，您有一个 div:

    <div class="overlay"></div>

然后你给它一个有点透明的深色背景，也许只是黑色。还要确保它跨越整个页面:

    .overlay{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 10;
      background-color: rgba(0,0,0,0.5); /*dim the background*/
    }