Div in primo piano e resto opaco

[laton]

Ciao ragazzi, vorrei chiedervi una cosa:
Ho creato un pulsante (di login) che quando viene cliccato si apre con un certo effetto di fade un div dove poi potrò mettere login e password, ora però vorrei che mentre si apra, tutto il resto della pagina cada in secondo piano e diventi più opaca del div, come fare?

Ho già usato z-index, quindi il div si vede chiaramente, ma vorrei aumentare questo confronto, facendo diventare la pagina anche opaca, come possso fare?

questo è il codice javascript da me usato, cosa potrei aggiungere per far ciò?

onclick="if(document.getElementById('box').className =='speech-bubble'){document.getElementById('box').className='speech-bubble_1'} else {document.getElementById('box').className='speech-bubble'} "

 

[criric]

Ciao, prova ad utilizzare questa istruzione

document.body.style.opacity = 0.1;