进行叠加的最佳方法答案

【问题标题】：The best way to do overlay进行叠加的最佳方法
【发布时间】：2013-06-05 12:41:00
【问题描述】：

<div id="main">
    <div>TITLE</div>
    <div>BODY</div>
    <div>COMMENT</div>
    <div><textarea></textarea></div>
</div>
<button>overlay</button>

#main {
    width: 200px;
    height: 200px;
    background-color: yellow;
}

直播：http://jsfiddle.net/9DLyE/1/

在 jQuery 中进行叠加的最佳方式是什么？如果我点击按钮叠加，那么我想叠加（与花式框相同）所有 div#main，例如背景颜色：蓝色和透明度 0.5。

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

使用position:absolute放置overlay div，使用jquery toggle显示。

CSS

#main {
    width: 200px;
    height: 200px;
    background-color: yellow;
    position:relative
}
#overlay{
    background:rgba(0, 84, 214, 0.5);
    height:100%; width:100%;
    position:absolute;
    top:0; left:0;
    display:none
}

jquery

$('button').click(function(){
    $('#overlay').toggle();
});

DEMO

【讨论】：

position:fixed 更好。
@Kolink 实际上没有。固定位置总是指向浏览器而不是父元素
OP 要求“same as fancybox”，暗示他们想要覆盖整个浏览器视口。
@Kolink 看看这一行'我想覆盖（与fancybox一样）所有div#main'这意味着主div

【解决方案2】：

你试过什么..??试着把点击事件像

$('button').on('click',function(){
   //Do your stuff
});

试试这个FIDDLE

【讨论】：

这改变了背景颜色，但我会保留原来的背景，并在这个叠加层上添加最大的 z-index。