Utilisation de l'attribut visibility pour
construire des fenêtres jaillissantes

Le principe simple est de construire une <div> qui sera affichée ou cachée suivant le code javascript mis en œuvre par les boutons ou entre les balises <script> </script> du <body>.

Le bouton ci-dessous permet d'ouvrir une fenêtre jaillissante.

Pour ce faire, une classe pop a été construite pour les <div> qui permet de fixer sa position et ses différentes caractéristiques. 

div.pop
{
	position: absolute; 
	left: 20px; top: 180px; 
	width: 500px; height: 200px;
	padding: 4px;
	border: 2px solid gray;
	background-color: rgb(125,165,205);
	
	visibility: hidden;
	z-index: 1;
}
On notera deux attributs Maintenant, créer une <div> ayant une id et la classe pop.
L'id de la <div> servira aux fonctions pour afficher ou cacher la fenêtre. Elle doit se trouver dans le <body> 
	<div id="fenetre" class="pop">

...

	</div>
Dans cette <div>, on peut utiliser tout les éléments habituels des pages html.

Quelques fonctions simplifieront les manipulations de la fenêtre. On notera que l'id peut être passé en paramètre si différentes fenêtres doivent être affichée et cachées.

Ces fonctions javascript modifient son attribut visibility. 
function afficher()
		{
	  		document.getElementById("fenetre").style.visibility = "visible";
		}
function  cacher()
		{
  			document.getElementById("fenetre").style.visibility = "hidden";
		}
Elles doivent être associées aux boutons. 
		<button onclick="afficher()">Afficher</button>

Une dernière remarque : au lancement, par défaut, la fenêtre est affichée et un script permet de la fermer à l'ouverture de la fenêtre. Il doit être placé après la déclaration <div>...</div>

Une façon d'afficher


un message
un peu travaillé