Sujet Précédent Sujet Suivant

Ouverture d'un pop-up personnalisable en cliquant sur une image

Résolu
darksam0000 Messages postés 132 Date d'inscription mardi 24 juin 2008 Statut Membre Dernière intervention 27 septembre 2020 - 18 nov. 2014 à 11:28
@karamel Messages postés 1838 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 19 août 2023 - 22 nov. 2014 à 20:35
Bonjour,

Voilà, j'essaye désespérément de créé un pop-up personnalisable en JavaScript/CSS. Je vous explique mon procéder !

Voici le menu que j'ai créé en HTML/CSS :


Ce menu sera composé des photos des membres d'une guilde.

Moi, j'aimerais voir afficher un pop-up lorsqu'on clique sur une de ces photos en utilisant JavaScript et CSS pour le personnaliser, et cela pour chaque photo. Et c'est là que je suis coincé, d'autant plus que je ne suis pas fortiche en JS !

En résumé, je clique sur la photo "membre1" et un pop-up s'ouvre avec ses coordonnées etc... (sans quitter au préalable ma page "membres.html"). Egalement la possibilité de fermer le pop-up à l'aide d'un bouton intégré au pop-up.

Voici mes codes sources pour le HTML et le CSS :

CODE HTML "membres.html" : 
<div class="aside">
	<h3>~ Membres ~</h3>
	<ul>
	<li>
	<a href="#" class="figure"><img src="membres/autre.png" alt=""></a>
	<span><a href="#">Membre 1</a></span>
	</li>
	<li>
	<a href="#" class="figure"><img src="membres/autre.png" alt=""></a>
	<span><a href="#">Membre 2</a></span>
	</li>
	<li><a href="#" class="figure"><img src="membres/autre.png" alt=""></a>
         <span><a href="#">Membre 3</a></span>
	</li>
	<li>
	<a href="#" class="figure"><img src="membres/autre.png" alt=""></a>
	<span><a href="#">Membre 4</a></span>
	</li>
	<li>
	<a href="#" class="figure"><img src="membres/autre.png" alt=""></a>
	<span><a href="#">Membre 5</a></span>
	</li>
	<li>
	<a href="#" class="figure"><img src="membres/autre.png" alt=""></a>
	<span><a href="#">Membre 6</a></span>
	</li>
         <li>
	<a href="#" class="figure"><img src="membres/autre.png" alt=""></a>
	<span><a href="#">Membre 7</a></span>
	</li>
	<li>
	<a href="#" class="figure"><img src="membres/autre.png" alt=""></a>
	<span><a href="#">Membre 8</a></span>
	</li>
	</ul>
</div>



CODE CSS "style.css" : 
#body .games .aside {
	background: url(../images/border.gif) repeat-x top left;
	float: left;
	margin: 0 0 0 30px;
	padding: 3px 0 0;
	width: 420px;
}
#body .games .aside ul {
 *min-height: 568px;
	overflow: hidden;
	padding: 5px 8px 11px;
}
#body .games .aside ul li {
	float: left;
	margin: 11px 10px;
	width: 178px;
}
#body .games .aside ul li span a {
	font-size: 21px;
	height: 38px;
	line-height: 38px;
	text-align: center;
}



Pouvez-vous m'aider svp ?

Cordialement
Darksam

15 réponses

Réponse 1 / 15
kuetedonald Messages postés 45 Date d'inscription vendredi 30 mai 2014 Statut Membre Dernière intervention 4 octobre 2016 3
18 nov. 2014 à 16:27
voici un exemple de code pour Popup en Javascript 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> 

<html>
	<head>
		<style>
		  #popupcontent{
   position: absolute;
   visibility: hidden;
   overflow: hidden;
   border:1px solid #CCC;
   background-color:#F9F9F9;
   border:1px solid #333;
   padding:5px;
}
		</style>
	</head>
	<body>
	<div id="popupcontent">This is a popup window!</div>
	
	<script>
	  var popUp = document.getElementById("popupcontent");
	   popUp.style.top = "30%";
	   popUp.style.left = "50%";
	   popUp.style.width = w + "px";
	   popUp.style.height = h + "px";
	   
	     if (baseText == null) baseText = popUp.innerHTML;
   popUp.innerHTML = baseText + 
      "<div id=\"statusbar\"><button onclick=\"hidePopup();\">Close window<button></div>";
 
 var baseText = null;
 
function showPopup(w,h){
   var popUp = document.getElementById("popupcontent");
 
   popUp.style.top = "200px";
   popUp.style.left = "200px";
   popUp.style.width = w + "px";
   popUp.style.height = h + "px";
 
   if (baseText == null) baseText = popUp.innerHTML;
   popUp.innerHTML = baseText + 
      "<div id=\"statusbar\"><button onclick=\"hidePopup();\">Close window<button></div>";
 
   var sbar = document.getElementById("statusbar");
   sbar.style.marginTop = (parseInt(h)-40) + "px";
   popUp.style.visibility = "visible";
}

function hidePopup(){
   var popUp = document.getElementById("popupcontent");
   popUp.style.visibility = "hidden";
}
	</script>
	
	<a href="#" onclick="showPopup(300,200);" >Open popup</a>
	</body>
</html>
si tu n'est pas satisfait tu pourra tapez ceci sur google 
jQuery Modal Dialog Boxes
bonne chance.
2
darksam0000 Messages postés 132 Date d'inscription mardi 24 juin 2008 Statut Membre Dernière intervention 27 septembre 2020 1
19 nov. 2014 à 23:00
Ton code fonctionne parfaitement et cela pour chaque image du menu ! Le pop-up a été modifier de toute beauté grâce au CSS. Un grand merci.

Cependant je n'arrive pas a centrer le pop up au centre de l'écran par défaut. Est-ce possible de le faire ?
0

Discussions similaires

Déplacer un rectangle en javascipt
100genial100 -
100genial100 -

24 réponses
formulaire dynamique
devdream -
kazma -

7 réponses
liste deroulante et checkbox
Ralako -
Ralako -

8 réponses
Accès aux réponses d'un QCM dans le code JS
lemage57 -
KX -

4 réponses
récuperer un id en javascript
msi79 -
nagaD.scar -

2 réponses
recuperer le plus petite et le plus grande valeurs d'un tableau
msi79 -
Nessdarth -

2 réponses
Rejoignez-nous