请看下面给出的链接来理解我的问题。使用CSS和Jquery的褪色效果

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

的事情是，当用户点击帮助按钮，一箱类型区的出现在屏幕的中心与框后面的其余区域仍清晰可见，即使剩余区域看起来淡了。我知道我们可以通过使用z-index使一个div显示在另一个div的顶部，但我无法理解如何使剩余区域看起来褪色。

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

来源

2014-03-06 kartik

这就是所谓的模式窗口，或模态对话框。去谷歌上查询。 – j08691

检查此链接，这将是一个很好的阅读http://www.webdesignerdepot.com/2012/04/techniques-for-creating-modal-windows/ – Shiva

https://jqueryui.com/dialog/#modal –

“褪色”效果可能只是一个半透明覆盖。 “箱型物”被称为“模态窗口”，或称为“模态”。

还有很多方法来实现这一点。这里是一个非常简单的例子使用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); 
});

来源

2014-03-06 20:14:11 Turnip

使用CSS和Jquery的褪色效果

回答

DEMO

相关问题