'Trazer para frente ' Div

[Paulo1471]

Boas !!

Tenho o seguinte código :

<a href="javascript:mostrarMensagem();">Mostrar Div</a>
<!-- e -->
<a href="javascript:fecharMensagem();">Fechar Div</a>

e

function mostrarMensagem() {
  $("#msg").slideDown(900);

  document.getElementById('main').style.opacity = '0.5';
  document.getElementById('msg').style.opacity = '1.0';
}
function fecharMensagem() {
  document.getElementById('msg').style.display = 'none';
  document.getElementById('main').style.opacity = '1.0';
}

//main é uma div que contem todo o conteudo da pagina !!

Que faz aparecer uma div !! Mas queria que ao mostrar essa div, o resto da pagina ficasse com uma sombra por cima, para realçar

a div . Como acontece aqui no forum quando colocamos no botao para por um codigo num comentario.

Mas com o codigo que tenho nao esta a dar bem , a div tambem fica com opacidade de 0.5 !!

Sugestões ??

Obrigado.

Edited August 8, 2012 at 03:02 PM by brunoais
geshi! + indentação

[brunoais]

Se usas o jQuery, pq n usas o método do jQuery feito de propósito para isso? Procura por algo do tipo: modal box.

[yoda]

Tens de criar uma div overlay para ficar por cima de tudo, e acima disso a mensagem que queres.

#overlay {
z-index: 1000;
width: 100%;
height: 100%;
min-width: 100%;
min-height: 100%;
background-color: rgba(0,0,0,0.2);
}

Edited August 8, 2012 at 05:20 PM by yoda

[Paulo1471]

Se usas o jQuery, pq n usas o método do jQuery feito de propósito para isso? Procura por algo do tipo: modal box.

Obrigado !! Vou investigar !!

Tens de criar uma div overlay para ficar por cima de tudo, e acima disso a mensagem que queres.

#overlay {
z-index: 1000;
width: 100%;
height: 100%;
min-width: 100%;
min-height: 100%;
background-color: rgba(0,0,0,0.2);
}

Huum, acho que entendi !! Vou testar algo assim !! Obrigado ! !