Ouverture d'un panneau ( faux popup) contenant une page web

Télécharger le projet
Commenter

Description

Bonjour

Le script suivant, tres simple a mettre en oeuvre, permet d'afficher un panneau, ou faux popup, lorsque l'on clique sur le lien. Rien de tres original certe, mais le contenu de ce panneau est un page ( html, txt ...). De plus, durant le chargement du contenu, une page par defaut est presenté.

Le script s'articule sur 3 pages, contenues dans le zip:
- index.html ( affiché si aprés)
- test.html ( qui correspond a la page a charger dans le panneau)
- empty.html ( page par defaut du panneau, durant le chargement du contenu)

Source / Exemple : 


// INDEX.HTML  //

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0  Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div class="main">
  <table class="center">
	<tr>
	<td><a href="#" onclick="showaction('test.html');">Ce lien permet l'ouverture de la page &quot;teste.html&quot;</a></td>
	</tr>
</table>

<!-- ce script gere l'ouverture, la fermeture et le contenu du panneau -->
  <script type="text/javascript">

	function showaction(url) {
		document.getElementById('page_action_iframe').contentWindow.document.body.innerHTML='Chargement en cours...';
		document.getElementById("page_action").style.visibility = "visible";

// ici, l'iframe prend tout la place disponible, mais il est aussi pssible de definir une largeur et une hauteur finie
		document.getElementById("page_action_iframe").style.width = "100%";
		document.getElementById("page_action_iframe").style.height = "100%";

		frames['page_action_iframe'].location.href= url ;

	}
	
	function hideaction() {
		document.getElementById("page_action").style.visibility = "hidden";
		document.getElementById("page_action_iframe").style.width = "1px";
		document.getElementById("page_action_iframe").style.height = "1px";
	}
</script>

<!-- Panneau -->

<!-- Pensez a modifier le style du panneau ce apres, qui gère sa largeur (width) , sa hauteur (height), la distance avec le haut (top) et le bord gauche (left) -->
<div id="page_action" class="panel" style="position:absolute; top:10px; left:10px; width:800px; height:200px; visibility:hidden;z-index:1000;">

	<table style="border:0px;height:20px;width:100%;" cellspacing="0px" cellpadding="0px"><tr>
		<td class="name" style="width:95%;padding-left:10px;">
<!-- Ici se trouve le titre du panneau -->		
		Titre du panneau ( à definir )
		</td>
		<td class="title" style="text-align:center;">[<a href="#" class="title" onclick="hideaction();">X</a>]</td>

	</tr></table>
	
<!-- Cet iframe affiche la page demandée ( dans cette exemple test.html ). durant le chargement, elle affiche la page empty.html  -->		
	<iframe id="page_action_iframe" name="page_action_iframe" src="empty.html" style="width:800px;height:600px;"></iframe>
</div>

</div>		
<!-- END Panneau -->		
</body>
</html>
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (franco_se)