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 :)
Afficher la suite
13 sept. 2015 à 00:06
13 sept. 2015 à 04:35
Est ce indispensable puisque vos balises sont correctement imbriquées? Sinon changer le pour que les transparences soient en dessous et non au dessus:
z-index: 9999; pour 2 éléments signifient qu'ils sont toujours au dessus des autres(et est une erreur car vous indiquez 2 éléments au même z-index)
13 sept. 2015 à 13:43