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

Soyez le premier à donner votre avis sur cette source.

Vue 22 663 fois - Téléchargée 3 525 fois

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>

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Messages postés
23
Date d'inscription
mardi 10 février 2004
Statut
Membre
Dernière intervention
19 avril 2012

Pour SLITAN :

N’étant pas quelqu’un de pointu en matière de programmation web, multi-languages, je me demandais si, au lieu de nous mettre des kilomètres de codes, n’aurait-il pas été préférable que tu place des balise <link > pour tes scripts et tes feuilles de styles ! Afin d’avoir une lecture moins « lourde »!!

Juste une question qui me permettra de savoir !

En ce qui concerne le code sus-cité, il fonctionne très bien sous Opera ( Windows et linux ) Firefox ( idem) Konqueror et Epiphany ( Linux )
Messages postés
1
Date d'inscription
mardi 26 juillet 2005
Statut
Membre
Dernière intervention
3 mars 2007

j'ai un problème pour l'ouverture des popups il faut réactualisé la page une fois le popup fremer.

voila le code source

---------------------------------------------------------



<!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" />
<script type="text/javascript">
<!--

userAgent = window.navigator.userAgent;
browserVers = parseInt(userAgent.charAt(userAgent.indexOf("/")+1),10);
function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}

function findElement(n,ly) {
if (browserVers < 4) return document[n];
var curDoc = ly ? ly.document : document;
var elem = curDoc[n];
if (!elem) {
for (var i=0;i<curDoc.layers.length;i++) {
elem = findElement(n,curDoc.layers[i]);
if (elem) return elem;
}
}
return elem;
}

function changeImages() {
if (document.images && (preloadFlag == true)) {
var img;
for (var i=0; i<changeImages.arguments.length; i+=2) {
img = null;
if (document.layers) {
img = findElement(changeImages.arguments[i],0);
}
else {
img = document.images[changeImages.arguments[i]];
}
if (img) {
img.src = changeImages.arguments[i+1];
}
}
}
}

var preloadFlag = false;
function preloadImages() {
if (document.images) {
template1_1_02_over = newImage("images/template1-1_02-over.gif");
profil_over = newImage("images/profil-over.gif");
blog_over = newImage("images/blog-over.gif");
galerie_over = newImage("images/galerie-over.gif");
myspace_over = newImage("images/myspace-over.gif");
contact_over = newImage("images/contact-over.gif");
face1_up = newImage("images/face1-up.gif");
preloadFlag = true;
}
}

// -->
</script>
<!-- End Preload Script -->
<!-- ImageReady Styles (template1-1.psd) -->
<style type="text/css">
<!--

#Tableau_01 {
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
}

#entete1 {
position:absolute;
left:0px;
top:0px;
width:48%;
height:45px;
}

#template1-1-02 {
position:absolute;
left:370px;
top:0px;
width:9.16%;
height:45px;
}

#profil {
position:absolute;
left:441px;
top:0px;
width:5.81%;
height:45px;
}

#blog {
position:absolute;
left:486px;
top:0px;
width:5.93%;
height:45px;
}

#galerie {
position:absolute;
left:532px;
top:0px;
width:6.98%;
height:45px;
}

#myspace {
position:absolute;
left:586px;
top:0px;
width:63px;
height:45px;
}

#contact {
position:absolute;
left:649px;
top:0px;
width:69px;
height:45px;
}

#main2 {
position:absolute;
left:718px;
top:0px;
width:57px;
height:45px;
}

#face1 {
position:absolute;
left:0px;
top:45px;
width:775px;
height:198px;
}

#template1-1-10 {
position:absolute;
left:0px;
top:243px;
width:536px;
height:84px;
}

#face2-2 {
position:absolute;
left:536px;
top:243px;
width:213px;
height:84px;
}

#template1-1-12 {
position:absolute;
left:749px;
top:243px;
width:26px;
height:11px;
}

#face2-3 {
position:absolute;
left:749px;
top:254px;
width:26px;
height:27px;
}

#template1-1-14 {
position:absolute;
left:749px;
top:281px;
width:26px;
height:18px;
}

#template1-1-15 {
position:absolute;
left:749px;
top:299px;
width:17px;
height:25px;
}

#template1-1-16 {
position:absolute;
left:766px;
top:299px;
width:9px;
height:51px;
}

#template1-1-17 {
position:absolute;
left:749px;
top:324px;
width:17px;
height:285px;
background-color:#FFFFFF;
}

#prof2 {
position:absolute;
left:0px;
top:327px;
width:31px;
height:310px;
background-color:#245E8E;
}

#b-prof {
position:absolute;
left:31px;
top:327px;
width:156px;
height:310px;
background-color:#225783;
}

#serv1 {
position:absolute;
left:187px;
top:327px;
width:26px;
height:310px;
background-color:#245E8E;
}

#serv2 {
position:absolute;
left:213px;
top:327px;
width:18px;
height:310px;
background-color:#3176AF;
}

#b-team {
position:absolute;
left:231px;
top:327px;
width:518px;
height:1px;
}

#template1-1-23 {
position:absolute;
left:231px;
top:328px;
width:18px;
height:285px;
background-color:#FFFFFF;
}

#b-team {
position:absolute;
left:249px;
top:328px;
width:500px;
height:285px;
}

#news3 {
position:absolute;
left:766px;
top:350px;
width:9px;
height:273px;
background-color:#3176AF;
}

#template1-1-26 {
position:absolute;
left:749px;
top:609px;
width:17px;
height:14px;
}

#template1-1-27 {
position:absolute;
left:231px;
top:613px;
width:18px;
height:10px;
}

#template1-1-28 {
position:absolute;
left:249px;
top:613px;
width:500px;
height:10px;
background-color:#FFFFFF;
}

#sup3 {
position:absolute;
left:231px;
top:623px;
width:544px;
height:14px;
background-color:#3176AF;
}

#b-links {
position:absolute;
left:0px;
top:637px;
width:775px;
height:43px;
}

-->
</style>
</head>

<!-- ImageReady Slices (template1-1.psd) -->









[#
]



[#
]




[#
]




[#
]




[#
]




[#
]









[#
]







<!-- 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) -->



<!-- Ici se trouve le titre du panneau -->
Titre du panneau ( à definir ),
[X]


<!-- Cet iframe affiche la page demandée ( dans cette exemple test.html ). durant le chargement, elle affiche la page empty.html -->


































































<!-- 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 = "770px";
document.getElementById("page_action_iframe").style.height = "300px";

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>




<!-- END Panneau -->






































</html>
Messages postés
15
Date d'inscription
mercredi 12 février 2003
Statut
Membre
Dernière intervention
14 août 2006

Bonjour,

Je confirme, script pas mal. Tourne sous Opéra 8 et 9.01

Je te met 8/10
Messages postés
8
Date d'inscription
vendredi 14 juin 2002
Statut
Membre
Dernière intervention
10 août 2006

Hello Franco_se
Je cherchais justement un trcu comme ça, je suis arrivé directement dessus, en plus c'est bien, il fonctionne sous FireFox ;-)... merci et bravo (code simple et efficace)

BobO

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.