[Résolu] Une div pour plusieurs boutons avec textes différents

Question

Fogiel

15 Oct 2015 à 00:37

Bonjour à tous, j'ai créé une div (boite de dialogue) qui s'affiche en cliquant sur un bouton.
Sur ma page web, j'ai plusieurs boutons. Chaque bouton ouvre cette fameuse boite de dialogue.
Le soucis c'est que je ne sais absolument pas comment faire pour que les textes dans la boite de dialogue soient différents selon le bouton cliqué.

ex:
• Le bouton 1 ouvre ma boite de dialogue. Dans la boite de dialogue j'ai les textes A1 et B1
• Le bouton 2 ouvre ma boite de dialogue. Dans la boite de dialogue j'ai les textes A2 et B2
• Le bouton 3 ouvre ma boite de dialogue. Dans la boite de dialogue j'ai les textes A3 et B3
etc..

voici le code HTML :

<body id="corps">
<div id="box">
	<div id="titre-box">titre</div>
	<button id="croix" onclick="fermer_box('box')"></button>
	<div id="image-box"></div>
	<div id="texte1-box"></div>
	<button id="loupe" onclick="loupe('')"></button>
	<div id="texte2-box"></div>
</div>

<button id="bouton" onclick="ouvrir_box('box');"> Voir </button>
<button id="bouton" onclick="ouvrir_box('box');"> Voir </button>
<button id="bouton" onclick="ouvrir_box('box');"> Voir </button>
<button id="bouton" onclick="ouvrir_box('box');"> Voir </button>
    
<script type="text/javascript">

	function ouvrir_box(id) {
	
	var divelement = document.getElementById(id);

       if(divelement.style.display == 'block')
          divelement.style.display = 'none';
       else
          divelement.style.display = 'block';
    }
	
	function fermer_box(id) {

       var divelement = document.getElementById(id);

       if(divelement.style.display == 'block')
          divelement.style.display = 'none';
       else
          divelement.style.display = 'block';
    }

	
</script>   
</body>

voici le code css :

#corps{
    background:brown;
}
#bouton {
    color: purple;
    background-color: pink;
    border: 0px;
}
#bouton:hover {
    color: pink;
    background-color: purple;
}
#box{
    position: fixed;
	top: 0px;
	left: 0px;
	display: none;
	background: blue;
	width: 440px;
	height: 300px;
	margin: 100px auto 0 auto;
}
#titre-box{
	position: absolute;
	width: 300px;
	height: 22px;
	color: yellow;
	font-size: 20px;
	background: green;
	margin: 20px 0 0 20px;
}
#croix{
	width: 19px;
	height: 19px;
	float: right;
	margin: 8px 12px 0 0;
	border: 0px;
	background: yellow;
}
#croix:hover{
	border: 0px;
	background: url(croix.png);
	cursor: pointer;
    background: green;
}
#image-box{
	position: absolute;
	width: 100px;
	height: 100px;
	margin: 70px 0 0 35px;
	background: black;
}
#texte1-box{
	position: absolute;
	width: 235px;
	height: 120px;
	margin: 70px 0 0 150px;
	background: green;
	float: right;
}
#loupe{
	width: 22px;
	height: 22px;
	margin: 176px 0 0 117px;
	border: 0px;
	background: yellow;
}
#loupe:hover{
	border: 0px;
	background: url(loupe.png);
	cursor: pointer;
    background: green;
}
#texte2-box{
	position: absolute;
	width: 365px;
	height: 70px;
	margin: 10px 0 0 35px;
	background: green;
}

SolidSnake

15 Oct 2015 à 09:27

Bonjour,

Il suffit de faire comme dans ton dernier topic, en passant le texte en paramètre :

<button id="bouton" onclick="ouvrir_box('box', 'Titre 1', 'Texte 1-1', 'Texte 2-1');">Voir</button>

Ce qui donne ÇA

EDIT: attention à ne pas dupliquer les id, un id doit être UNIQUE.
Modifié par SolidSnake (15 Oct 2015 - 09:30)

Fogiel

15 Oct 2015 à 09:58

Merci énormément, ça fonctionne a merveille !
tu gère ! Smiley winner

SolidSnake

15 Oct 2015 à 13:44

Si tu as un peu de mal en javascript pur, je te conseille de tester le framework jQuery qui est là pour te simplifier la vie !

Fogiel

15 Oct 2015 à 14:05

merci beaucoup, je vais m'y coller serieusement ! Smiley cligne

Neoprojet

31 Oct 2017 à 16:28

Bonjour,

Je souhaiterais faire +- la même chose mais je souhaiterais que chaque box aient une couleur de background différent, la possibilité de faire de la mise en page de texte et même y intégrer des liens.
En fait l'idéal serait même d'ouvrir une page html avec un background transparent mais avec la page d'accueil en arrière plan.

Je vous joins une image

Chaque bulle doit être "cliquable".
Prenons l'exemple de la bulle "Dynamique d'entreprise" si je clique dessus,
Une page Html s'ouvre au-dessus de la page d'accueil avec un background rose en opacité

Voici mon code

N.B.: Il y a peut-être d'autres incohérences, n'hésitez pas à les signalées Smiley biggrin


<!doctype html>
<html lang="fr">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" title="no title" charset="utf-8">
	<link rel="stylesheet" href="css/mathodo.css" type="text/css" media="screen" title="no title" charset="utf-8">
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	
	<script>
		function ouvrir_box(id, titre, text1) {
		  var divelement = document.getElementById(id);
		  document.getElementById('titre-box').innerHTML = titre;
		  document.getElementById('texte1-box').innerHTML = text1;
		  divelement.style.display = 'block';
		}

		function fermer_box(id) {
		  var divelement = document.getElementById(id);
		  divelement.style.display = 'none';
		}
	</script>
		
	<title>Mathodo</title>
</head>

<body>
	<div id="content">
		<nav>
			<ul>
				<li id="eleves" class="orange"><a href="#" onClick="ouvrir_box('box', 'Titre Elèves', 'Texte Elèves');">Elèves</a></li>
				<li id="vie" class="rose"><a href="#" onClick="ouvrir_box('box', 'Titre Vie', 'Texte vie');">Vie personnelle<br>et familiale</a></li>
				<li id="etudiants" class="orange"><a href="#">Etudiants</a></li>
				<li id="etablissements" class="orange"><a href="#">Etablissements <br>scolaires</a></li>
				<li id="contourorange"><a href="#">Cours pour<br>apprendre à<br>apprendre</a></li>
				<li id="organisation" class="rose"><a href="#">Organisation de<br>l’espace</a></li>
				<li id="dynamique" class="rose"><a href="#">Dynamique<br>d’entreprise</a></li>
				<li id="contourrose"><a href="#">Cours pour<br>apprendre à<br>s’organiser</a></li>
				<li id="ovalemathodo"><a href="#">La méthode<br><span id="mathodo">Mathodo</span></br> pour développer sa propre<br> méthodologie</a></li>
				<li id="contourbleu"><a href="#">Informations<br>pratiques</a></li>
				<li id="coach" class="bleu"><a href="#">Présentation<br>de votre coach</a></li>
				<li id="contact" class="bleu"><a href="#">Contacter<br>votre coach</a></li>
				<li id="ateliers" class="gris"><a href="#">Ateliers créatifs</a></li>
				<li id="contourgris"><a href="#">Cours de<br>mathématiques</a></li>
				<li id="stages" class="gris"><a href="#">Stages<br>CEB / CE1D</a></li>
				<li id="primaire" class="gris"><a href="#">Primaire<br>   3e secondaire</a></li>
			</ul>
		</nav>
	</div>
	
	<div id="box" onclick="fermer_box('box')">
		<div id="arporange"></div>
		<div id="titre-box">titre</div>
		<button id="croix" onclick="fermer_box('box')"></button>
		<div id="texte1-box"></div>
	</div>
</body>
</html>


@charset "utf-8";
/* CSS Document */
	/* importing CSS */
@import url("reset.css");
	
/*........................Common.............................. */

html {
	font-size: 100%;
}

body {
	height: 100%;
	left: 0;
	min-height: 100%;
	min-width: 100%;
	top: 0;
	width: 100%;
	font-family: "DIN Alternate", "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", "Helvetica", "Arial", "sans-serif";
	color: black;
}

#content{
	position: absolute;
	min-height:50%;
	min-width: 100%;
	width: 100%;
	text-align: center;
	margin: 0 auto;
}

li{
	position: absolute;
	display: flex; /*Centrer verticalement via flexbox*/
}

li a {
	text-decoration: none;
	font-family: "DIN Alternate", "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", "Helvetica", "Arial", "sans-serif";
	color: black;
	font-size: 1.5em;
	text-align: center;
	vertical-align: middle;
	margin: auto; /*Centrer verticalement via flexbox*/
}

/*........................Test.............................. */

#box{
	position: relative;
	display: none;
	width: 440px;
	height: 300px;
	margin: 0 auto;
}

#arporange{
	position: absolute;
	background: #f89c59;
	width: 100%;
	height: 100%;
	z-index: 10;
	opacity: 0.5;
}

#titre-box{
	position: absolute;
	width: 300px;
	height: 22px;
	font-size: 20px;
	background: #f89c59;
	margin: 20px 0 0 20px;	
	z-index: 20;
}

#texte1-box{
	position: absolute;
	width: 300px;
	height: 120px;
	margin: 70px 0 0 20px;
	background: #f89c59;
	float: right;
	z-index: 20;
}

#croix{
	position: relative;
	width: 19px;
	height: 19px;
	float: right;
	margin: 8px 12px 0 0;
	border: 0px;
	background: yellow;
	z-index: 30;
}
#croix:hover{
	position: relative;
	border: 0px;
	background: url(croix.png);
	cursor: pointer;
    background: green;
	z-index: 30;
}

/*........................Ovales plein.............................. */

.orange, .rose, .bleu, .gris {
    width: 222px;
    height: 78px;
    background: #f89c59;
    -webkit-border-radius: 111px / 39px;
    -moz-border-radius:    111px / 39px; 
    border-radius:         111px / 39px; 
}

.rose {
	background: #e839bd;
}

.bleu {
	background: #1fb9b0;
}

.gris {
	background: #939292;
}

/*........................Positions.............................. */

#eleves {
	position: relative;
	left: 310px;
	top: 4px;
	width: 222px;
	height: 78px;
}

#vie {
	left: 754px;
	top: 4px;
}

#etudiants {
	left: 5px;
	top: 54px;
	width: 222px;
	height: 78px;
}

#etablissements {
	left: 5px;
	top: 195px;
}

#contourorange {
	left: 245px;
	top: 100px;
}

#organisation {
	left: 1060px;
	top: 54px;
}

#dynamique {
	left: 1060px;
	top: 195px;
}

#contourorange, #contourrose {
    width: 260px;
    height: 136px;
    border: 5px solid #f89c59;
    -webkit-border-radius: 135px / 73px;
    -moz-border-radius:    135px / 73px; 
    border-radius:         135px / 73px; 
}

#contourrose {
	border: 5px solid #e839bd;
	left: 780px;
	top: 100px;
}

#contourbleu, #contourgris {
    width: 304px;
    height: 108px;
    border: 5px solid #1fb9b0;
    -webkit-border-radius: 157px / 59px; /*304px + 10px(2*5px contour)/2 = 157px*/
    -moz-border-radius:    157px / 59px; 
    border-radius:         157px / 59px; 
	left: 201px;
	top: 480px;
}

#contourgris {
	border: 5px solid #939292;
	left: 780px;
}

#ateliers {
	left: 1060px;
	top: 397px;
}

#coach {
	left: 5px;
	top: 594px;
}

#contact {
	left: 292px;
	top: 604px;
}

#stages {
	left: 780px;
	top: 604px;
}

#primaire {
	left: 1060px;
	top: 604px;
}

/*........................Mathodo.............................. */

#ovalemathodo {
    width: 432px;
    height: 232px;
    border: 5px solid #e25860;
    -webkit-border-radius: 221px / 121px;
    -moz-border-radius:    221px / 121px; 
    border-radius:         221px / 121px; 
	left: 428px;
	top: 243px;
	font-size: 1.2em;
}

#mathodo{
	font-size: 2.5em;
}

/*........................Links.............................. */

#contourorange a{
	color: #f89c59;
	font-size: 1.8em;
	margin: auto;
}

#contourrose a{
	color: #e839bd;
	font-size: 1.8em;
}

#contourbleu a{
	color: #1fb9b0;
	font-size: 1.8em;
}

#contourgris a{
	color: #939292;
	font-size: 1.8em;
}

#contourorange a:hover{
	color: #000;
}

#contourrose a:hover{
	color: #000;
}

#contourbleu a:hover{
	color: #000;
}

#contourgris a:hover{
	color: #000;
}

#eleves a:hover, #etudiants a:hover, #etablissements a:hover, #vie a:hover, #organisation a:hover, #dynamique a:hover, #ateliers a:hover, #stages a:hover, #primaire a:hover, #coach a:hover, #contact a:hover{
	color: #fff;
}

Sujet clos

JavaScript, DOM et API Web HTML5

[Résolu] Une div pour plusieurs boutons avec textes différents