Question

<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中进行叠加的最佳方法是什么？如果我点击按钮叠加，那么我想覆盖（与fancybox相同）所有div＃main，例如background-color：蓝色和透明度0.5。

Answer 1

使用position:absolute放置叠加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

Answer 2

你尝试了什么.. ??尝试点击事件，如

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

试试这个FIDDLE

覆盖的最佳方式

2 个答案: