Leandro Vieira Pinho´s Blog

Overlay para o body com JavaScript com a Mtzlib

November 25th, 2006. Published under DOM, add-on, javascript, mtzlib. No Comments.

Expliquei no post anterior - Overlay para o body com JavaScript - como criar um overlay para o body com JavaScript. Neste post, falarei sobre o mesmo assunto, ou melhor, explicarei a mesma coisa.

Mas agora, iremos reproduzir o mesmo efeito, mas utilizando a Mtzlib. Assim, você poderá comparar a função bodyOverlay que criamos anteriormente com esta agora. Observe:

function bodyOverlay() {
	var sizesPage = getPageSize();
	$append($new("div","id=bodyOverlay",''));
	$('bodyOverlay').style.height = arrayPageSize[1] + 'px';
}

Veja como a Mtzlib facilitou nossa vida e tornou todo o processo mais fácil.

Veremos agora, como adicionar o add-on w3FadingOpacity. Observe mais uma vez:

function bodyOverlay() {
	var sizesPage = getPageSize();
	$append($new("div","id=bodyOverlay",''));
	$('bodyOverlay').style.height = arrayPageSize[1] + 'px';
	var fadeOverlay = new w3FadingOpacity('bodyOverlay',0,80,0);
	fadeOverlay.start();
}

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

function removerOverlay() {
if ( $('bodyOverlay') ) {
$remove($('bodyOverlay'));
}
}

Um detalhe. Já que está utilizando o w3FadingOpacity você deverá fazer uma simples alteração nas CSS, observe:

opacity: 0;
filter:alpha(opacity=0);

Se você não leu o post anterior: Overlay para o body com JavaScript leia-o para você compreender este melhor. Uma vez que este tem a simples intenção de demonstrar como é mais simples trabalhar com JavaScript e DOM utilizando a Mtzlib.

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