Boite de dialogue qui ne s'ouvre pas ! Grrrrrr

Bonjour, j'ai créé une div avec des sous-div, qui forment une petite boite de dialogue, et j'aimerais que cette boite de dialogue s'ouvre en cliquant sur un bouton et qu'elle se referme en cliquant sur un bouton "fermer" dans la boite elle même.

Malheureusement je n'y arrive point !

Pour information : sur ma page web il y a plusieurs boutons, je voudrais que ma boite de dialogue s'ouvre avec un texte différent par bouton. Ici je vous donne un seul bouton pour ne pas charger le post.

Voici ma boite de dialogue HTML :

<div id="box">
	<div id="titre-box"></div>
	<button id="fermer" onclick="fermer()"></button>
	<div id="texte1-box"></div>
	<div id="texte2-box"></div>
</div>

Voici mon bouton :

<button id="bouton" onclick="ouvrir-box('texte1 dans la box','texte2 dans la box')"> Voir </button>

voici mon css (au cas ou) :

#box{
	display: none;
	background: url(box.png);
	width: 440px;
	height: 300px;
}
#titre-box{
	position:absolute;
	width: 300px;
	height: 22px;
	color: #fff;
	font-size: 20px;
	background: transparent;
	margin: 20px 0 0 20px;
}
#fermer{
	width: 19px;
	height: 19px;
	float: right;
	margin: 8px 12px 0 0;
	border: 0px;
	background: transparent;
}
#fermer:hover{
	border: 0px;
	background: url(croix.png);
	cursor: pointer;
}
#texte1-box{
	position:absolute;
	width: 235px;
	height: 120px;
	margin: 70px 0 0 150px;
	background: transparent;
	float: right;
}
#texte2-box{
	position: absolute;
	width: 365px;
	height: 70px;
	margin: 10px 0 0 35px;
	background: transparent;
}

Modifié par Fogiel (12 Oct 2015 - 23:03)

Salut,

Je pense que tu devrai commencer ton développement avec ta box affiché, et corrigé les position :

#box{
	position:absolute;
	display: block;
	width: 440px;
	height: 300px;
	margin: 100px auto 0 auto;
}
#titre-box{
	/*position:fixed;*/
}
#fermer{
}
#fermer:hover{
}
#texte1-box{
	/*position:fixed;*/
}
#texte2-box{
	/*position: fixed;*/
}

Merci, je viens de faire les petits changements que tu m'as proposé mais ça ne fonctionne toujours pas. Voici mon javascript :

<script type="text/javascript">

	function FermerBox('fermer'){
        boxHide('box');
        document.getElementById('fermer').style.visibility='hidden';
    }
    function boxHide('box'){
        var box = document.getElementById("box");
        box.style.display = "none";
    }
    function ouvrir-box(titre,texte){
		document.getElementById("text1-box").innerText=titre;
		document.getElementById("texte2-box").innerText=texte;
        var box = document.getElementById("box");
        box.style.display = "block";
    }
	
</script>

j'ai tellement refais, modifier, rerefais, remodifier... ce code doit être le plus pourri du monde ^^'

Si il ne se passe rien, c'est qu'il y a une erreur.

Comme te l'a proposé SolidSnake, peux tu nous indiquer si il y a des erreurs dans la console javascript, et si oui les quel ?

Si il n'y a pas d'erreur. Merci de re-poster ton code complet en prenant soin de supprimer le code superflue.

c'est bon je viens de réécrire mon javascript pour une énième fois, et ça fonctionne ! par contre j'ai un autre souci maintenant, j'ai ouvert un nouveau sujet pour ne pas s'éloigner de ce sujet : http://forum.alsacreations.com/topic-5-77079-1-Unedivpourplusieursboutonsavectextesdiffnrents.html

(si le lien ne fonctionne pas, faut faire copier/coller)
Modifié par Fogiel (15 Oct 2015 - 00:44)