OUVERTURE D'UN PANNEAU ( FAUX POPUP) CONTENANT UNE PAGE WEB

Signaler
Messages postés
8
Date d'inscription
vendredi 14 juin 2002
Statut
Membre
Dernière intervention
10 août 2006
-
Messages postés
23
Date d'inscription
mardi 10 février 2004
Statut
Membre
Dernière intervention
19 avril 2012
-
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.

https://codes-sources.commentcamarche.net/source/38959-ouverture-d-un-panneau-faux-popup-contenant-une-page-web

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