J'ai créé plusieurs bouton pour ouvrir des Popups

Bonjour,

j'ai voulu créer des 4 boutons pour ouvrir autant d'articles grâce à des pop-ups.

Les boutons sont bien affichés par le HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="style_acceuil/style.css">
		<title>Titre de ma page</title>
	</head>

	<body>
		<div id="block_page">
			<header>
				<div id="titre_principal">
					<div id="logo">
						<img src="img/recycling_2.png">
						<h1>Titre de ma page</h1>
					</div>
				</div>
			</header>

			<section id="section">
				<div id="somaire">
				<button id="btnPopup" class="btnPopup">PRÉSENTATION</button>
					<div id="fond" class="fond">
						<div id="popup" class="popup">
							<div id="présentation">
								<h2>
									Présentation
									<span id="btnClose" class="btnClose">&times;</span>
								</h2>
								<img src="img/pic01.jpg">
								<p class="Présentation">
									Ma présentation, blablabla... 
								</p>
							</div>
						</div>
					</div>
				<button id="btnPopup" class="btnPopup">MON CV</button>
					<div id="fond" class="fond">
						<div id="popup" class="popup">
							<div id="cv">
								<h2>
									Mon titre de CV
									<span id="btnClose" class="btnClose">&times;</span>
								</h2>
                                                                <p> Mon CV, blablabla...
							</div>
						</div>
					</div>
				<button id="btnPopup" class="btnPopup">MON PROJET</button>
					<div id="fond" class="fond">
						<div id="popup" class="popup">
							<div id="projet">
								<h2>
									Mon titre de projet
									<span id="btnClose" class="btnClose">&times;</span>
								</h2>
								<img src="img/pic02.jpg">
								<h3>Comment est-il né?</h3>
								<p>
	                                                              Mon projet, blablabla...
								</p>
							</div>
						</div>
					</div>						
				<button id="btnPopup" class="btnPopup">CONTACT</button>
					<div id="fond" class="fond">
						<div id="popup" class="popup">
							<div id="contact">
								<h2>
									"Contact"
									<span id="btnClose" class="btnClose">&times;</span>
								</h2>

								<p class="font-size">
									ADRESSE :
									TELEPHONE :

									E-MAIL :
								</p>
							</div>
						</div>
					</div>
				</div>
			</section>

			<footer>
				
			</footer>
		</div>
		<script src="script.js"></script>
	</body>
</html>

mis en forme comme je le souhaitais par le CSS

/* Section */

.btnPopup
{
	display: inline-block;
	justify-content: center;  
   	border: 0.5px solid white;
	border-radius: 5px 5px 5px 5px;
	padding: 10px 20px;
	color: #FFFF;
	background-color: rgba(255, 255, 255, 0.075);
}

.btnPopup:hover
{
	background-color: rgba(255, 255, 255, 0.15);
}

.fond
{
	display: none;
	position: fixed;
	left: 0px;
	top: 0px;
	background-color: rgba(255, 255, 255, 0.2);
	width: 100%;
	height: 100%;
}

.popup
{
	display: none;
	position: center;
	background: url("fond.png") scroll repeat center;
	width: 500px;
	margin: auto;
	margin-top: 300px;
	padding: 30px;
}

.btnClose
{
	float: right;
}

et voilà niveau JS

var btnPopup = document.getElementById('btnPopup');
var fond = document.getElementById('overlay');
var btnClose = document.getElementById('btnClose');

btnPopup.addEventListener('click',openModal);
btnClose.addEventListener('click',closePopup);

function openModal()
{
	fond.style.dipslay = 'block';
}

function closePopup()
{
	fond.style.dipslay = 'none';
}

sauf que quand je clique dessus les pop-ups ne s'ouvre pas.

pourtant quand j'enlève le "display: none;" dans le CSS elles sont bien affichées.

J'ai mis le même ID et CLASS pour les 4 boutons, faut-il les déclarer différement chacun? Est-il nécessaire de mettre les 2 l'ID suffit je pense?

Si tel est le cas faut-il déclarer dans le JS autant de fois que de boutons et pop-ups ?

Étant débutant en JS/CSS/HTML je ne suis pas sur de ma syntaxte, es-ce la bonne?

Et aussi, j'ai mis le fichier .js avec le fichier .html, es-ce bien comme ça que ça doit être rangé?

A mon avis le lien du JS au CSS et au HTML ne se fais pas, donc ma syntaxe en JS doit merdé...

PS: j'ai parcouru brièvement les cours de JS sur OpenClassrooms mais je ne les ai pas encore commencer.

dsl pour toutes ces questions

Cordialement

Salut, il y a pas mal d'erreur dans ton code, je pense qu'il faut reprendre les bases de Javascript, car ca serait un peu long à expliquer dans ce post.

1erement, pour lien ton fichier js à ta page HTML tu dois mettre ce lien dans le head, supposons qu'il s'appelle script.js

<script src="script.js" defer></script>

2ement, les ids sont uniques, c'est comme une carte d'identité, si plusieurs éléments ont la même id, ton javascript va rien comprendre.

Contrairement aux class. Si tu veux sélectionner toutes tes class, il faut utiliser la commande document.querySelectorAll("nom de la class").

A ce moment, ca te gênera un tableau avec tous éléments ayant cette class. Et il faudra faire une boucle for pour leur mettre à tous un addEventListener.

Si tu veux, j'ai un cours sur youtube pour apprendre à faire une todo List de A à Z, ou j'explique un peu tout cela pour un débutant:

https://www.youtube.com/playlist?list=PLn0WRmKoGQMNkJCgXeLpUj0DkLN6pkyRy

-
Edité par NadfriJS 15 octobre 2020 à 21:41:45

Ne fonctionne pas quand je clique dessus - Débutant en JS

J'ai créé plusieurs bouton pour ouvrir des Popups

Supprimer

Modérer

Signaler le message aux modérateurs