Leandro Vieira Pinho´s Blog

Overlay para o body com JavaScript

November 25th, 2006. Published under DOM, css, javascript. 5 Comments.

Veremos como é simples criar um overlay para o body com JavaScript, se você não sabe do que se trata, posso lhe explicar. Sabe aquele feito utilizado pelo Lightbox JS em que o body é revestido por completo, deixando-o translúcido? Então, veremos como produzir este efeito.

Bom, inicialmente, precisaremos da seguinte função:

function getPageSize(){
var xScroll, yScroll;
if (window.innerHeight && window.scrollMaxY) {
xScroll = document.body.scrollWidth;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}
var windowWidth, windowHeight;
if (self.innerHeight) {	// all except Explorer
windowWidth = self.innerWidth;
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}
// for small pages with total height less then height of the viewport
if(yScroll < windowHeight){
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}

Para quem não a conheça, vou explicá-la. Esta função criada pelo Peter-Paul Koch retorna um array com quatro significantes informações na seguinte ordem: largura da página, altura da página, largura do viewport e altura do viewport.

Bom, com essas informações conseguiremos perfeitamente nosso objetivo - overlay para o body - e iremos fazê-lo com esta simples função:

function bodyOverlay() {
	var objBody = document.getElementsByTagName('body').item(0);
	var sizesPage = getPageSize();
	var bodyOverlay = document.createElement("div");
	bodyOverlay.setAttribute('id','bodyOverlay');
	bodyOverlay.style.height = arrayPageSize[1] + 'px'; // fundo com o tamanho total da página.
	if (!document.getElementById('bodyOverlay')) {
		objBody.insertBefore(bodyOverlay, objBody.firstChild);
	}
}

Ou seja, “pegamos” a tag body, criamos uma tag div definindo dois atributos para ela - id=”bodyOverlay” e style=”height:tamanho-total-da-pagina” - e finalmente inserimos a tag div no body. Resultando no seguinte código:

<div style="height: 1179px;" id="w3BodyEncobridor"></div>

Para remover o overlay criado, você pode utilizar a seguinte função:

function removerOverlay() {
	var bodyOverlay = document.getElementById('bodyOverlay');
	if (bodyOverlay) {
		bodyOverlay.parentNode.removeChild(bodyOverlay);
	}
}

E para finalizar utilizamos estas declarações CSS:

#bodyOverlay {
	background-color: #000;
	opacity: 0.8;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	filter:alpha(opacity=80); /* colando em um arquivo separado para o IE. */
}

Façam os testes, e retorne com um feedback. Se tiver alguma dúvida não hesite em perguntar.

[UPDATE] Veja um exemplo deste efeito [/UPDATE]