Лучший способ сделать наложение

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? Если я нажму на кнопку overlay, то я бы хотел наложить (такой же, как fancybox) все div # main, например background-color: blue и transparent 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