Accueil > > > OUVERTURE D'UN PANNEAU ( FAUX POPUP) CONTENANT UNE PAGE WEB
OUVERTURE D'UN PANNEAU ( FAUX POPUP) CONTENANT UNE PAGE WEB
Information sur la source
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
- // 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 "teste.html"</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>
// 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 "teste.html"</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>
Sources de la même categorie
Commentaires et avis
Discussions en rapport avec ce code source dans le forum
Page qui ne termine pas proprement son chargement sous Firefox [ par MaX3315 ]
Bonjour, J'ai un petit problème avec l'un de mes script que j'ai posté sur codes-sources : http://www.javascriptfr.com/code.aspx?ID=34781
Ouverture d'une popup et fermeture apres chargement de la page suivante [ par visualresine ]
Bonjour,J'aimerais sur mon site web ouvrir une popup avec un petit message "veuillez patienter" et ensuite que la fenetre popup se ferme apres chargem
Ouverture d'un POPUP au chargement d'une page [ par suleyman ]
je voudrais savoir comment ouvir un popup au chargemnt d'une page sans pouvoir bloquer le popup car ie7 bloc les popupvoici le code que jai utiliser:&
popup ne se ferme pas. [ par aymen_jaa ]
Bonjour, jai une fenetre popup qui contient un formulaire,quand l'utilisateur valide, ca déclenche une fonction pour vérifier les donnéespuis si c'est
Popup modal [ par njulio ]
Comment maintenir un popup au premier plan. (Showmodal en Delphi par exemple)
Un menu qui ne se refermerait pas au chargement de la page ? [ par antotol ]
Bonjour, Je poste ici afin de demander de l'aide à une bonne âme.. Voilà, étant relativement nul en javascript, je m'enquis auprès de vous afin que si
XML/Javascript [ par Orange73 ]
Bonjour,j'ai un xml qui chqrge des données dans du flash.Dans ce xml, j'ai un élément qui doit ouvrir une pop up lors de son click via javascript mais
pop up [ par fatatra ]
Bonjour a tous;Je fais a un moment donnée dans mon site web appelle a du javascript qui ouvre un popup.Probleme quand je referme ce popup tous ce qui
Prblème de function [ par tepe ]
BonjourJ'ai un problème avec une fonction externe.Dans mon <head><script src="prog/prog.js" type="text/javascript">ReFrame();popup();</
Enregistrement de forumlaire par popup virtuelle [ par sananas ]
Bonjour,J'aimerais s'avoir s'il est possible d'insèrer une page dans un calque pour traiter des données...Je m'explique j'ai un formulaire a remplir a
|
Derniers Blogs
DéMARRONS AVEC LES TASKSDéMARRONS AVEC LES TASKS par richardc
Que vous le vouliez ou non, le développement multi-tâche est maintenant une obligation pour toute nouvelle application. Il est donc vital d'en comprendre les mécanismes et de s'y mettre le plus tôt possible.
En attendant le .NET Framework 4.5 avec le...
Cliquez pour lire la suite de l'article par richardc SLIDE & DéMO TECHDAYS 2012 - FAST & FURIOUS XAML APPSSLIDE & DéMO TECHDAYS 2012 - FAST & FURIOUS XAML APPS par Vko
Retrouvez les slides et les démo de ma session Fast & Furious XAML Apps. A ceux qui se posent la question : "est-ce que le code de la DataGrid est disponible?", je vous répondrais "pas encore". Je vais mettre en place un projet codeplex pour part...
Cliquez pour lire la suite de l'article par Vko XNA IS DEAD!XNA IS DEAD! par richardc
Depuis la semaine dernière (et grâce aux TechDays 2012), je me penche activement sur la nouvelle version de Windows, aka Windows 8. Vous me direz, il était temps puisque la première preview date de Septembre dernier.
OK. Remarquez, on n'en est qu'aux...
Cliquez pour lire la suite de l'article par richardc TECHDAYS PARIS 2012 : WINDOWS SERVER "8" QUOI DE 9 !TECHDAYS PARIS 2012 : WINDOWS SERVER "8" QUOI DE 9 ! par ROMELARD Fabrice
Speakers: Fabrice Meillon et Stanislas Quastana Cette session est basée entièrement sur celle donnée lors de la BUILD cet hiver. Il n'y a pas d'ajout d'information en rapport avec cet évènement passé. Windows 8 Server sera intégralem...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice [HTML5] AUTOUR DU W3C : NOUVEAUX STANDARDS ET WEB MOBILE (LILLE)[HTML5] AUTOUR DU W3C : NOUVEAUX STANDARDS ET WEB MOBILE (LILLE) par Gio
Je m'y prends un peu tard je sais, mais bon je suis développeur web et donc hyper fainéant ! Toujours dans le cadre des technologies émergentes, ici HTML5, parce qu'on aime HTML5 chez Wyg , nous seront présent, le vieux ( Aurélien V.) et moi, pour pr...
Cliquez pour lire la suite de l'article par Gio
Logiciels
DocTranslate (V3.1.0.0)DOCTRANSLATE (V3.1.0.0)DocTranslate est un traducteur de document Microsoft Word, PowerPoint et Excel. Il permet d'autom... Cliquez pour télécharger DocTranslate Tribler (2012)TRIBLER (2012)Tribler est un client pair à pair (P2P/Peer-to-Peer) open source avec la capacité de regarder des... Cliquez pour télécharger Tribler OneSwarm (2012)ONESWARM (2012)Le peer-to-peer qui protège votre vie privée, c'est OneSwarm.
Ce logiciel de peer-to-peer crypté... Cliquez pour télécharger OneSwarm PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA TV DEVIENS HELLLOOO FLASH
LA TV SUR VOTRE ORDINATEUR.
Toute une plateforme Multi... Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO Academy System (17.2.1.0)ACADEMY SYSTEM (17.2.1.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System
|