28172 sujets

CSS et mise en forme, CSS3

Changer contenu d'une popup

Bonjour,
Dans un formulaire en php, j'ai intégré les "?" qui affichent des popups pour aider à remplir certains champs.
J'ai récupéré un script (HTML et CSS) que j'ai adapté. Il fonctionne bien et je le trouve sympa.
Mais si j'ai plusieurs popups, le contenu ne se modifie pas, j'ai toujours le contenu de la 1ère popup intégrée.
Je me permets de vous soumettre mon code HTML et CSS, si vous pouviez, SVP, me dire où se situe l'erreur ?
Un grand merci par avance,
Evelyne31#

Code html 1ère popup
<a href="#modalContent"><IMG SRC="lith_images/interrogation.png"></a></p>
	<div class="modalLayer" id="modalContent">
			<div class="popup_block">
				<a href="#noWhere"><img alt="Fermer" title="Fermer la fenêtre" class="btn_close" src="lith_images/croix.png"></a>
				<titre>Aide à la saisie d'un formulaire</titre>
				<p>Lorsque vous sélectionnez un pays……</p>				
			</div>
	</div>


Code html 2ème popup
<a href="#modalContent"><IMG SRC="lith_images/interrogation.png"></a></p>
	<div class="modalLayer" id="modalContent">
			<div class="popup_block">
				<a href="#noWhere"><img alt="Fermer" title="Fermer la fenêtre" class="btn_close" src="lith_images/croix.png"></a>
				<titre>Aide Google Maps</titre>
				<p>Vous devez être inscrit-e pour bénéficier de ce service….</p>
			>/div>
	</div>


Code CSS (dans fichier style.css à part)
#modalCheck2{
			display: none;
		}
		.modalLayer{
			display: none;
			position: fixed;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: rgba(0, 0, 0, 0.5);
		}
		#modalCheck:checked + .modalLayer, #modalContent:target{
			display: block;
		}
		.popup_block{
			background: #fff;
			padding: 20px;
			//border: 20px solid #ddd;
			border:10px solid #336600;
			position: relative;
			margin: 10% auto;
			width: 40%;
			box-shadow: 0px 0px 20px #000;
		}
		img.btn_close {
			float: right;
			margin: -40px -40px 0 0;
			cursor: pointer;
		}
J'ai trouvé une solution : refaire un style css pour chaque popup en les numérotant.
Ce n'est pas très satisfaisant mais ça fonctionne.
Bonne fin de journée,
Evelyne31
Bonjour lddsoft,
Je te remercie pour ta réponse qui m'a bien été utile.
Pour faire plus "propre", en plus de numéroter mes id j'ai fait des includes php.
Au final, chaque popup a :
- un n° : id="modalContent1", id="modalContent2"...
- est dans un fichier .php indépendant avec les codes CSS, HTML.
Si cela intéresse quelqu'un, voici un de mes codes (texte non finalisé).
Encore merci et bonne fin de journée,
Evelyne31

<!doctype html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Modalbox CSS</title>
	<style>
		h1{
			text-align: center;
		}
		#modalCheck{
			display: none;
		}
		.modalLayer{
			display: none;
			position: fixed;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: rgba(0, 0, 0, 0.5);
		}
		#modalCheck:checked + .modalLayer, #modalContent2:target{
			display: block;
		}
		.popup_block{
			background: #fff;
			padding: 20px;
			//border: 20px solid #ddd;
			border:6px solid #336600;
			border-radius:10px;
			position: relative;
			margin: 10% auto;
			width: 40%;
			box-shadow: 0px 0px 20px #000;
		}
		img.btn_close {
			float: right;
			margin: -30px -30px 0 0;
			cursor: pointer;
		}
		.button{
			cursor: pointer;
			color: blue;
			text-decoration: underline;
		}
	</style>
</head>

<body>
	
Obtenir de l'aide pour créer une carte :&nbsp&nbsp<a href="#modalContent2"><IMG SRC="lith_images/interrogation.png"></a></p>
	<div class="modalLayer" id="modalContent2">
			<div class="popup_block">
				<a href="#noWhere"><img alt="Fermer" title="Fermer la fenêtre" class="btn_close" src="lith_images/croix.png"></a>
				
				<titre>Aide Google Maps</titre>
				<br/><br/>
				<p>Vous devez être inscrit-e pour bénéficier de ce service.</p>
				<p>Vous identifier avec le bouton "Connexion" en haut à droite.</p>		
				<p>Dans la barre de recherche Google tout en haut, vous pouvez indiquer un nom de lieu ou ses coordonnées (longitude et latitude séparées par une virgule).</p>
				<p>Plusieurs options de présentation sont possibles...</p>
				<p>Cliquez sur le lien et copier/coller le pour l'insérer dans la case du formulaire… (à finaliser)</p>
			</div>
	</div>	

</body>
</html>
Sujet clos
Aller à