28172 sujets

CSS et mise en forme, CSS3

[Résolu] Boite de dialogue opacity 0.9 SAUF le bouton "OK"

Bonjour, j'ai cherché partout mais je ne trouve pas ce que je cherche.

J'ai créé un bouton sur une page ou lorsqu'on clique dessus, une boite de dialogue apparaît, cette boite de dialogue est en fait une div contenant 3 sous-div (en-tête, corps, et pied de page), un bouton OK est placé dans le pied de page de la boite de dialogue. Je voudrait que toute la boite de dialogue soit transparente (opacity 0.9) SAUF le bouton OK qu'elle contient.

Pour mettre la boite de dialogue transparente j'ai donc mis ma div opacity 0.9 mais cela s'applique a toutes mes sous-div. Le problème c'est que le bouton OK est dans la dernière sous-div et donc il est également transparent. J'ai tout essayé mais rien n'y fait ! Saperlipopette ! Smiley bataille

voici mon code html : 
<body id="corps">
<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>
        <!--button onclick="dlgCancel()">Cancel</button-->
    </div>
</div>
<button id="bouton" onclick="showDialog('Titre de la boite de dialogue',' Texte de la boite de dialogue ')"> Voir </button>
<script>
    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";
    }
</script>
</body>


et voici mon code css : 
#corps{
    background: url("http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg");
}
#dlgbox{   /*Box*/
    display: none;
    position: fixed;
    width: 480px;
	height: 300;
	border: 1px solid #898471;
    border-radius: 2px;
    background-image:linear-gradient(300deg, #11100b, #0b1224);
	
    }
#dlg-header{     /*en-tete*/
    color: #fff;
    font-size: 22px;
    padding: 10px;
	text-align: center;
	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: #fff;
    font-size: 16px;
    padding: 10px;
    margin: 0 10px 0 10px;
	height: 175;
    }
#dlg-footer{     /*pied de page de la box*/
    text-align: right;
    padding: 10px;
    margin: 0 10px 10px 10px;
	
    }
#dlg-footer button{    /*bouton*/
	border: 1px solid #5590d7;
	border-radius: 2px 2px 2px 2px;
	background-image:linear-gradient(#3870b5, #0e2747);
	color: #fff;
	height: 25px;
	width: 95px;
	
    }
#dlg-footer button:hover{     /*bouton au survol*/
	background-image:linear-gradient(#0e2747, #3870b5);
	color: #fff

    }
Modérateur
Bonjour,

Avec opacity, tous les éléments contenu dans l'élément (sur lequel opacity est appliqué) seront impactés. Le plus simple est d'appliquer un background RGBA (le A est pour alpha) sur ton div (et c'est très bien supporté).
div{background-color: rgba(0, 0, 0, .9);}
Sujet clos
Aller à