Bouton et texte opaque dans une boite de dialogue translucide

Bonjour,

j'ai créé une boite de dialogue de type :

<div id="white-background">
</div>
<div id="dlgbox">
    <div id="dlg-header"></div>
    <div id="dlg-body"></div>
    <div id="dlg-footer">
        <button onclick="dlgOK()">OK</button>
    </div>
</div>

<button id="bouton" onclick="showDialog('xxxx','xxxxx')"> Voir </button>

avec ce javascript :

    function dlgCancel(){
        dlgHide();
        document.getElementsByTagName("H1")[0].innerHTML = "You clicked Cancel.";
    }
    function dlgOK(){
        dlgHide();
        document.getElementsByTagName("H1")[0].innerHTML = "You clicked OK.";
    }
    function dlgHide(){
        var whitebg = document.getElementById("white-background");
        var dlg = document.getElementById("dlgbox");
        whitebg.style.display = "none";
        dlg.style.display = "none";
    }
    function showDialog(titre,texte){
		document.getElementById("dlg-header").innerText=titre;
		document.getElementById("dlg-body").innerText=texte;
        var whitebg = document.getElementById("white-background");
        var dlg = document.getElementById("dlgbox");
        whitebg.style.display = "block";
        dlg.style.display = "block";
        var winWidth = window.innerWidth;
        dlg.style.left = (winWidth/2) - 480/2 + "px";
        dlg.style.top = "150px";
   }

voici le css (avec surement des erreurs ^^') :

#white-background{    /*Derriere la Box*/
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
	background-color: #fff;
	opacity: 0.1;			
    }
#dlgbox{   /*Box*/
    display: none;
    position: fixed;
    width: 480px;
	height: 300;
    z-index: 9999;
	border: 1px solid #898471;
    border-radius: 2px;
    background-image:linear-gradient(300deg, #11100b, #0b1224);
	opacity: 0.9;
	
    }
#dlg-header{     /*en-tete*/
    color: white;
    font-size: 20px;
    padding: 10px;
	text-align: center;
	opacity: 1;
	border-bottom: 1px solid #898471;
	margin: 0 20px 0 20px;
	background-image:linear-gradient(260deg, #11100b, #0b1224, #11304c, #11304c, #11304c, #11304c, #0b1224, #0b1224);
    }
#dlg-body{    /*dans la box*/
    color: white;
    font-size: 14px;
    padding: 10px;
    margin: 0 10px 0 10px;
	height: 175;
	opacity: 1;
    }
#dlg-footer{     /*pied de page de la box*/
    text-align: right;
    padding: 10px;
    margin: 0 10px 10px 10px;
	opacity: 1;
    }
#dlg-footer button{    /*bouton*/
	border: linear-gradient(#5590d7, #5590d7); 
	border: 1px;
	border-radius: 1px 1px 1px 1px;
	background-image:linear-gradient(#3870b5, #0e2747);
	color: #fff;
	height: 25px;
	width: 95px;
	opacity: 1;
	
    }
#dlg-footer button:hover{     /*bouton au survol*/
	border: linear-gradient(#595239, #7a6d48);   
	background-image:linear-gradient(#f59600, #be2a00);
	color: #fff

    }

Je voudrais que le texte dans la boite de dialogue ainsi que le bouton soit opaque et que la boite de dialogue reste translucide. J'ai tout essayé mais ça ne fonctionne pas.

PS : voici mon autre sujet non résolu : https://forums.commentcamarche.net/forum/affich-32516210-arriere-plan-fou
Merci a l'avance :)