FAUSSE POPUP AVEC EFFET DE TRANSPARENCE
stfou
Messages postés
450
Date d'inscription
samedi 16 avril 2005
Statut
Membre
Dernière intervention
18 avril 2007
-
23 mars 2007 à 19:14
Weedygamer Messages postés 10 Date d'inscription dimanche 8 mai 2005 Statut Membre Dernière intervention 8 novembre 2011 - 8 nov. 2011 à 11:38
Weedygamer Messages postés 10 Date d'inscription dimanche 8 mai 2005 Statut Membre Dernière intervention 8 novembre 2011 - 8 nov. 2011 à 11:38
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/41941-fausse-popup-avec-effet-de-transparence
https://codes-sources.commentcamarche.net/source/41941-fausse-popup-avec-effet-de-transparence
8 nov. 2011 à 11:38
$(".tip7").fancybox({
'showCloseButton' : false,
'titlePosition' : 'inside',
'titleFormat' : formatTitle
});
et basta
Vive JQuery, vive les nouvelles libs ;)
14 mars 2010 à 21:15
Avec un code HTML à rajouter ?
20 févr. 2010 à 23:12
www.-greg-@hotmail.fr
merci
8 févr. 2010 à 02:47
8 oct. 2009 à 14:49
Merci d'avance pour votre aide...
8 oct. 2009 à 14:26
Je souhaite utiliser ce script et j'ai donc apporté les améliorations proposées par les différents commentaires ainsi que des adaptations pour pouvoir l'utiliser sur mon site mais je rencontre un petit problème depuis lors :
Le faux popup s'affiche bien mais le tableau central qui est censé écrire les informations souhaitées est également transparent.
J'ai modifié je ne sais plus combien de fois le CSS mais rien y fait, tout le popup est transparent.
Je vous propose mon code :
- index.php :
include_once("includes/overlay.php");
echo "<script src= 'includes/overlay.js'></script>
<!-- div obligatoire pour les fenêtre overlay les div sont modifié par overlay.js -->
<!-- fin div -->
";
[...]
echo overlay(""._OVERLAY_CONNECT.".
<form action ='index.php?file=members&page=login&nude=1' method='POST'>Login : Pass :
"._ENREG."
</form>",'noconnect');
- includes/overlay.php (nommé en .php pour des raisons précises) :
echo "<!--- Partie CSS pour la gestion overlay et window !--->
<style type='text/css'>
.calque
{
color: #000000;
position: fixed;
top: 0px;
visibility : hidden;
padding: 0px;
font-family: Courrier;
align: center;
font-size: 8pt;
background-color: #000000;
filter: alpha(opacity=75); /* IE */
-moz-opacity: 0.5; /* Mozilla */
opacity: 0.5; /* CSS3 */
-khtml-opacity: .5; /* Safari */
width: 100%;
height : 100%;
top : expression(document.body.scrollTop + this.offsetHeight - this.offsetHeight);
position : expression('absolute');
width : expression('100%');
left : expression('0px'); left : 0 ;
}
.image_calque
{
filter: alpha(opacity=100); /* IE */
-moz-opacity: 1; /* Mozilla */
opacity: 1; /* CSS3 */
-khtml-opacity: 1; /* Safari */
border-collapse: collapse;
background-color: #FFFFFF;
color: #000000;
}
.window
{
color: #FFFFFF;
position: fixed;
top: 30px;
visibility : hidden;
padding: 0px;
font-family: Courrier;
align: center;font-size: 8pt;
background-color: #FFFFFF;
width: 100%;
height : 100%;
top : expression(document.body.scrollTop + this.offsetHeight - this.offsetHeight + 30);
position : expression('absolute');
width : expression('590px');
left : expression('25%');
left : 0 ;
}
.contemp_window
{
width: 100%;
height : 100%;
border : 0;
}
</style>
<!-- fin CSS pour la partie overlay -->";
- includes/overlay.js :
var w3c=document.getElementById && !document.all;
var ie=document.all;
if (ie||w3c) {
var overlay;
}
function affiche_overlay_window(message)
{
montreoverlay("
<\/a> "+message+"
<\/td><\/tr><\/table>");
}
function montreoverlay(text) {
if (w3c||ie){
overlay = document.all ? document.all["overlay"] : document.getElementById ? document.getElementById("overlay") : ""
overlay.innerHTML = text; // fixe le code HTML dans l'overlay balise (div)
overlay.style.visibility = "visible"; // modification du style
document.body.style.overflow='hidden'; // pour fonetiklilian on cache le scroll
document.getElementsByTagName("html")[0].style.overflow = 'hidden';
}
}
function cachetout() {
if (w3c||ie){
// masque la fenetre (balise div [window] )
overlay = document.all ? document.all["overlay"] : document.getElementById ? document.getElementById("overlay") : ""
overlay.innerHTML =''; // vide la balise div sinon on peut plus saisir de texte dans la partie ou était afficher cette derniere (cas d'un formulaire)
overlay.style.visibility = "hidden";
document.body.style.overflow= 'auto'; // pour fonetiklilian -> moz scroll horiz
document.body.style.overflowY= 'auto'; // pour fonetiklilian -> moz scroll vert
document.getElementsByTagName("html")[0].style.overflow = ""; // pour fonetiklilian pour ie
}
}
function ecrire_cookie(nom, valeur, expires)
{
document.cookie=nom+"="+escape(valeur)+
((expires==null) ? "" : ("; expires="+expires.toGMTString()));
}
- fonctions.php :
function overlay($texte,$namecookie='',$expirecookie='')
{
$overlay = "<script language=\"javascript\" type=\"text/javascript\">
affiche_overlay_window(\"<table border='0' width='600' style='filter: alpha(opacity=100);-moz-opacity: 1;opacity: 1;-khtml-opacity: 1;'>----,
".$texte."</td>
");";
if ($namecookie != '')
{
if ($expirecookie == '')
{
$overlay .= "ecrire_cookie('".$namecookie."', false);";
}
else
{
$overlay .= "ecrire_cookie('".$namecookie."', false, ".$expirecookie.");";
}
}
$overlay .= "</script>";
return $overlay;
}
12 avril 2009 à 11:01
J'ai utilisé le code et ca marche à merveille sauf que j'aimerai pouvoir mettre le lien :
afficher la page test 2
dans une anim flash, et la, ca coince, quelqu'un aurait il la syntaxe correcte, parce que la mienne ne l'est pas et il semblerait que Flash ait décidé de se liguer contre moi et de me compliquer la vie!!!
Merci d'avance.
Séverine.
10 févr. 2009 à 14:47
10 févr. 2009 à 14:37
super script que je cherchais depuis un petit moment
tout comme aliki je souhaiterait pouvoir ouvrir plusieurs pages avec un contenu de dimensions différentes est il possible que les dimensions de la fausse popup soit auto par rapport aux dimensions des pages ? si oui comment?
pour Analchik: ton code à l'air super mais je ne sais pas ou le mettre peux tu m'aider?
10 févr. 2009 à 14:28
super script que je cherchais depuis un petit moment
tout comme aliki je souhaiterait pouvoir ouvrir plusieurs pages avec un contenu de dimensions différentes est il possible que les dimensions de la fausse popup soit auto par rapport aux dimensions des pages ? si oui comment?
pour Analchik: ton code à l'air super mais je ne sais pas ou le mettre peux tu m'aider?
27 oct. 2008 à 11:30
Quelqu'un pourrait-il m'aider?
J'aimerais intégrer le lien d'ouverture de ce script dans un lien flash.
Merci!
2 oct. 2008 à 17:37
28 juin 2008 à 03:46
.calque{opacity:.80;color: #FFFFFF;position: fixed; top: 0px;visibility : hidden;padding: 0px;font-family: Courrier;align: center;font-size: 8pt;background-color: #000000;opacity : .75;filter : alpha(opacity=75);width: 100%;height : 100%;top : expression(document.body.scrollTop + this.offsetHeight - this.offsetHeight);position : expression("absolute");width : expression("100%");left : expression("0px"); left : 0 ;}
.image_calque{height: 100%;}
.window{color: #FFFFFF;position: fixed; top: 30px;visibility : hidden;padding: 0px;font-family: Courrier;align: center;font-size: 8pt;background-color: #FFFFFF;width: 100%;height : 100%;top : expression(document.body.scrollTop + this.offsetHeight - this.offsetHeight + 30);position : expression("absolute");width : expression("590px"); left : expression("25%");left : 0 ;}
.contemp_window{width: 100%;height : 100%;border : 0;}
Ce code est comptable avec tous les navigateurs, du moins IE, FF et Opéra.
27 juin 2008 à 17:08
Tout d'abord, super script!
Mais j'ai un problème, dans une page trés haute et je souhaite appeler le script plusieur fois avec des iframe différentes, le probléme c'est qu'à chaque appel du script ca remonte en haut de page alors que j'aimerai que le calque s'ouvre à l'endroit ou je me trouve sans remonter.
J'imagine que c'est dans le CSS, j'ai essayé quelques petits truc mais ca ne passe pas.
Si quelqu'un à solution ca me sortirait un grosse épine du pied :)
Je vous remercie.
Florent
19 juin 2008 à 15:33
Bravo pour le code ci dessus...
J'ai essayé de l'utiliser mais j'ai un petit problème...
J'ai deux fenêtres de tailles différentes à ouvrir depuis la même page html et je n'arrive pas à faire la modification pour que ça fonctionne...
Quelqu'un peut-il m'aider, svp?
Merci d'avance..
22 mai 2008 à 10:39
merci beaucoup pour vos commentaires et la note aussi, et particulièrement punkCity qui a résolu le probleme d'iframe/compatibilité ie-mozilla .
8 mai 2008 à 17:10
Ou une du meme genre lol
4 mai 2008 à 10:53
le mieux c'est de poser ta question sur le forum !
3 mai 2008 à 22:59
Jaimerais installer ce script sur mon site mais jaimerais mettre mon formulaire de contact dans la popup qui ouvre et que la popup ouvre seulement en cliquant sur une image que jai mi (Nous contacter) et biensur un coup le formulaire de contact remplie quil clic sur envoyer dans la popup et que la popup se referme et que sa retourne a la page daccueil. Si quelqun peut maider contacter moi et je vous enverrer les informations quil vous faut.
Un gros merci davance a ceux qui me repondront
2 févr. 2008 à 16:58
je voudrais à partir de ce super script créer un lien dans la fenetre DHTML ouverte, un lien qui ferme ET renvoie le visiteur sur une page spécifique.
Est ce possible ? comment ?
merci d'avance
20 déc. 2007 à 09:46
Merci d'avance pour un peu d'aide, au moins des pistes pour chercher sur google.
3 oct. 2007 à 23:13
reponse rapide et 100% efficace !
par contre j'ai rien compris à l'adresse que tu as laissé pour ajouter une page php...
sans abuser ?!?!! ?
:-) merci pour tout
3 oct. 2007 à 14:14
A plus tard.
PS : dommage de ne pas pouvoir éditer ses messages !!!
3 oct. 2007 à 11:57
Je cherche une solus, et je l'ajoute des que j'ai trouvé !
Encore dsl
3 oct. 2007 à 11:39
Pour que le scroll disparaisse avec ie ajout à la fin de la fonction montreoverlay(text) {
document.getElementsByTagName("html")[0].style.overflow = 'hidden';
et remplace :
document.getElementsByTagName("html")[0].style.overflow = ""; // pour fonetiklilian pour ie
par
document.getElementsByTagName("html")[0].style.overflow = 'hidden';
Sinon pour afficher un page au lieu du tableau je pense qu'un simple window.open() couplé à montreoverlay() et un opener.document (voir http://www.javascriptfr.com/code.aspx?ID=15732) (si tu veux avoir une relation entre ton "popup" et ta page source) doivent faire largement l'affaire.
2 oct. 2007 à 23:52
Et pour afficher une page .php au lieu du tableau comment on fait ??? ton aide pourrait mettre tres utile :-)
remarque : le scroll disparait sur Moz mais pas sur IE....
merci axel
23 août 2007 à 14:35
Et pour notre ami FireFox, comment kon fait pour ça fonctionne ? :D
22 juil. 2007 à 20:00
Je suis novice javascript, mais j'aurai plutôt vu un div au lieu d'une iframe.
Du genre un fichier javascript comme ca :
var w3c=document.getElementById && !document.all;
var ie=document.all;
if (ie||w3c) {
var overlay;
}
function affiche_overlay_window(message){
montreoverlay("<table id='image_calque' valign='center' border='0' align='center' style='opacity:1'><tr><td> "+message+"
Fermer cette fenetre<\/a><\/td><\/tr><\/table>");
}
function montreoverlay(text) {
if (w3c||ie){
overlay = document.all ? document.all["overlay"] : document.getElementById ? document.getElementById("overlay") : ""
overlay.innerHTML = text; // fixe le code HTML dans l'overlay balise (div)
overlay.style.visibility = "visible"; // modification du style
document.body.style.overflow='hidden'; // pour fonetiklilian on cache le scroll
}
}
function cachetout() {
if (w3c||ie){
// masque la fenetre (balise div [window] )
overlay = document.all ? document.all["overlay"] : document.getElementById ? document.getElementById("overlay") : ""
overlay.innerHTML =''; // vide la balise div sinon on peut plus saisir de texte dans la partie ou était afficher cette derniere (cas d'un formulaire)
overlay.style.visibility = "hidden";
document.body.style.overflow= 'auto'; // pour fonetiklilian -> moz scroll horiz
document.body.style.overflowY= 'auto'; // pour fonetiklilian -> moz scroll vert
document.getElementsByTagName("html")[0].style.overflow = ""; // pour fonetiklilian pour ie
}
}
La feuille de style :
#overlay{
color: #FFFFFF;
position: absolute;
visibility : hidden;
padding: 0px;
font-family: Courrier;
font-size: 8pt;
background: url('../images/menu/overlay.png') !important;
width: 100%;
height : 100%;
top : 0px;
left : 0px;
overflow:hidden;
}
#image_calque{
height: 100%;
top : 15%;
left : 25%;
}
Et le
à place dans la page html sous
Et enfin l'appel du script avec <script language="javascript" type="text/javascript">affiche_overlay_window("le texte a afficher")</script>
Bon j'espère que j'ai rien oublié. En tous les cas ca fonctionne très bien sous ie et moz et le background: url('fichierpngtransparant.png') !important; permet de griser la page, et non pas le div image_calque, comme le faisait l'opacité.
Bonne journée
6 juil. 2007 à 11:59
tu pourrais juste me dire ou ajouter document.body.scroll="no". pour annuler le scroll stp?
d'avance merci
30 juin 2007 à 11:31
29 juin 2007 à 12:51
Il y a un probleme si la page est grande (barre de scroll vertical)...
le background se contente de remplir la partie visible de la page au chargement...
Quelqu'un connait-il une solution pour eviter ce problème
Merci
31 mars 2007 à 08:14
Pour l'opacité :
filter: alpha(opacity=50); /* IE */
-moz-opacity: 0.5; /* Mozilla */
opacity: 0.5; /* CSS3 */
-khtml-opacity: .5; /* Safari */
Nickadele
30 mars 2007 à 13:08
Tout d'abord je suis d'accord avec NICKADELE et pour cause ;0)
Concernant le code maintenant
Opacité :
Pour Opera non prise en compte, du moins actuellement...
Pour NetScape telle qu'elle est définie dans le style cela n'est pas pris en compte, il faut utiliser[ -moz-opacity:.80;]
Il semble donc plus judicieux d'utiliser un image opaque type PNG pour le background du DIV.
Recouvrement :
Dans tous les cas le fait de mettre height et width à 100% ne garanti que le recouvrement de la fenêtre d'affichage mais pas de la totalité du document si il y a les scrollbars.
Il est donc nécessaire de récuper les document.body.scrollHeight et Width pour ajuster la taille du DIV.
Dernier point je pense qu'actuellement le document.getElementById est compatible tous navigateur, il n'est peut être plus utile de tester document.all ce qui allége le code.
;0)
24 mars 2007 à 12:59
c'est une autre solution, mais perso je ne trouve pas ça très élégant!
De plus si ta fausse popup contient elle même des Select il te faudra les traiter séparément pour qu'ils s'affichent.
Nickadele
24 mars 2007 à 11:52
var selects = document.getElementsByTagName('SELECT');
for(var i = 0; i < selects.lenght; ++i)
selects[i].style.display = 'none';
tu fais l'inverse à la fermeture du popup et c'est bien mieux et plus propre qu'une iframe... .. .
@ tchaOo°
23 mars 2007 à 22:25
manathan a raison d'utiliser une iframe, cela permet d'éviter le bug de IE qui affiche les Select en avant plan même avec un DIV devant.
Pour plus d'info va voir l'exemple de ma source http://www.javascriptfr.com/codes/SELECT-DIV-PROBLEME-DANS-IE-COMMENT-RESOUDRE_37901.aspx
Nikadele
23 mars 2007 à 20:59
Perso je t'aurai mis 4/10 mais je préfere pas te déscendre pour t'encourrager à optimiser ta source...
Have fun
23 mars 2007 à 19:14