28172 sujets

CSS et mise en forme, CSS3

Ouverture image avec fond du site assombrit dans <form>

Bonjour,

J'ai utilisé la balise <form> pour créer un menu déroulant avec des choix. Via javascript à la sélection du choix, une image apparait dans une nouvelle fenêtre et quand on clique sur cette fenêtre elle se referme.

C'est ce que je souhaitais mais pour aller plus loin esthétiquement, j'essaye d'obtenir le même résultat que sur cette page test : http://subran.be/test2/

Sur la page test, on voit des images et lors du clique sur l'image, l'image s'agrandit et le fond du site s'assombrit.

J'essaye de faire en sorte d'obtenir le même effet avec mon menu déroulant <form> lors de la sélection d'une image mais ... je tourne en rond.

Avez-vous une piste ? Peut-être une autre idée pour le choix de l'image que via la balise form...

Merci d'avance pour votre aide,

Sub
Bonjour,
Le CSS ne suffira pas pour ce genre d'effets (vous devez vous en douter).
Le JavaScript va s'avérer nécessaire dans la conception de ce genre d'effets.
Soit en passant par jQuery et ses nombreux plug-in (comme ici avec les images) que je ne connais malheureusement pas... ou en le programmant vous-même avec jQuery (c'est très faisable aussi).
Soit avec du JavaScript natif mais autant utiliser une belle bibliothèque bien jolie et facile d'utilisation avec des fonctions d'animation toutes faîtes bien jolies =)

En gros, pour le fonctionnement, il faut une div vide qui servira de background qu'il faudra faire apparaître lors du clic sur "Consulter" et disparaître quand on cliquera sur elle.
Et une div vide initialement que vous remplirez puis afficherez lors du clic sur "Consulter" puis que vous cacherez au clic sur la div de background.
Et un peu d'AJAX dans tout ça pour aller récupérer le contenu à placer dans la div =)
Voici ce que j'ai réalisé, je ne sais pas si ça correspond à ce que tu souhaites :

Ta page principale

<html>
<head>
<style>
/* C'est le fond grisâtre qui prend toute ta page que ta popup s'ouvre */
#background {
	display: none;
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	background: #000000;	
	z-index: 1;
}
</style>
<script type="text/javascript">
	/*Appelée quand on sélectionne une valeur dans le selecteur*/
	function openPopupFromSelector(aSelector) {
		var userChoice = aSelector.options[aSelector.selectedIndex].value;
		if (userChoice == "blank_choice") {
			return false; // Evite d'ouvrir une popup pour le cas "vide"
		}
		window.open("popup.html?content=" + aSelector.options[aSelector.selectedIndex].value, "myPopup","width=500,height=400"); // Ouverture de la popup
		displayBackground(true); // On met le fond grisâtre empêchant de sélectionner ce qu'il y a derrière
	}
	
	/*Permet d'afficher / masquer le fond grisâtre*/
	function displayBackground(show) {
		var background = document.getElementById("background");
		if (show) {
			background.style.display = "block";
		} else {
			background.style.display = "none";
		}
	}
	
	/*Appelée par le popup lors de sa fermeture*/
	function popupClosed() {
		displayBackground(false);
	}

</script>
</head>
<body>

<select id="mySelector" onchange="openPopupFromSelector(this)">
	<option value="blank_choice" selected="selected"></option>
	<option value="content1">Content1</option>
	<option value="content2">Content2</option>
</select>

<div id="background" style="opacity: 0.7; display: none;"></div> <!-- La div grisâtre prenant tout l'espace (position: absolute et height/width 100%) -->

</body>
</html>


La popup :

<html>
<head>
<script type="text/javascript">
	function triggerParent() {
		window.opener.popupClosed();
	}
	
	window.onbeforeunload = triggerParent; // Lorsqu'elle se ferme, elle appelle triggerParent()
</script>
</head>
<body>
	<span>Hello je suis dans la popup !</span>
</body>
</html>



La page principale ouvre une popup quand on sélectionne un Content non vide sans le selecteur, puis affiche un fond grisâtre empêchant de sélectionner quoi que ce soit dans la page principale (une div est devant tout le monde).

La popup s'ouvre, et lors de sa fermeture, elle prévient la page principale qu'elle se ferme.
Cette dernière décide donc de masquer le fond grisâtre, permettant à nouveau d’interagir avec la page principale.

J'ai fait ça vite fait, ça fonctionne sous FF 12 en local.
A adapter si ça te convient.
Sujet clos
Aller à