DEMO

Question

请查看下面给出的链接以了解我的问题。

https://drive.google.com/file/d/0B52AyCZWoFl_TjdLQzNRQUFtaG8/edit?usp=sharing

问题是，当用户点击帮助按钮时，屏幕中央会出现一个区域的框类型，并且框后面的剩余区域仍然可见，即使剩余区域看起来褪色。我知道我们可以通过使用z-index使一个div出现在另一个div之上，但是我无法理解如何使剩余区域看起来褪色。

有人可以用一个简单的例子来证明这一点。感谢

Answer 1

“褪色”效果可能只是一个半透明的叠加层。 “盒子类型的东西”被称为“模态窗口”，或者只是“模态”。

有许多方法可以实现这一目标。这是一个使用jquery的简单示例：

DEMO

<button id="trigger">Click me</button>
<div class="overlay"></div>
<div class="modal">Hello. I'm a modal window</div>

.overlay {
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.6);
    position:fixed;
    z-index: 1;
    top: 0;
    left: 0;
    display: none;
}

.modal {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    display: none;
}

$('#trigger').click(function() {
   $('.overlay,.modal').fadeIn(300); 
});

$('#close').click(function() {
   $('.overlay,.modal').fadeOut(300); 
});

使用CSS和Jquery的褪色效果

1 个答案:

DEMO