CodeS-SourceS est hébergé par Frontier.fr

Cliquez ici pour mettre ce site au démarrage de votre navigateur

AccueilCodesTutorielsForumsEmploiLivresGuide achatConnexion

begin process at 2009 07 05 19:22:00

SILVERLIGHT 3 : COMMUNICATION ET MULTICAST par KooKiz

[PERSO] DéCOUVERTES ESTIVALES : LINUX (PART I) par FREMYCOMPANY

[REFACTORING] RESHARPER POUR VISUAL STUDIO 2010 (PREVIEW) par tja

[REFACTORING] ANALYSER VOS EXCEPTIONS AVEC RESHARPER EXCEPTIONAL par tja

SHAREPOINT 2007 : PATTERNS & PRACTICES SHAREPOINT GUIDANCE par phil

CODE POUR EDITEUR DE TEXTE AVEC PRISE EN CHARGE DU COPIER/COLLER GARDANT LA MISE EN FORME par lolhangman

RE : COMMENT RéCUPéRER LES VARIABLES DE PLUSIEURS FORMULAIRES POUR OUVRIR FICHIER EXCEL par Bul3

RE : JOUER UN SON PAR UN CLIC par azuron

RE : COMMENT RéCUPéRER LES VARIABLES DE PLUSIEURS FORMULAIRES POUR OUVRIR FICHIER EXCEL par jdmcreator

COMMENT RéCUPéRER LES VARIABLES DE PLUSIEURS FORMULAIRES POUR OUVRIR FICHIER EXCEL par FAURE364Denis

+ de logiciels à télécharger

1 464 798 membres
293 nouveaux aujourd'hui
15 045 membres club

Trouver une ressource

Trouvez une ressource parmi 40 095 codes, 1 302 984 messages d'aide etc...

Recherche: dans [ Dernières recherches ]

Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

FAUSSE POPUP AVEC EFFET DE TRANSPARENCE

Information sur la source

Catégorie :Fenêtre & Pop-up Classé sous : fausse, popup, transparence, overlay Niveau : Débutant Date de création : 23/03/2007 Vu / téléchargé: 24 673 / 4 473

Auteur : manathan

Ecrire un message privé

Note :

9,00 / 10

Commentaire sur cette source (32)

Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale

Ce code sert à faire une fausse fenetre popup en masquant la fenêtre en cours avec un effet de transparence.

Conclusion

Création de deux balises de type (div) , une contient l'effet de transparence gérer en CSS, et l'autre contient une iframe qui permet
d'y charger une page html.

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

images
- f_endroit.gif 53 688 octets
- load.gif 7 347 octets
index.html 1 357 octets
overlay.js 2 010 octets
page2.html 310 octets

Télécharger le zip

Sources de la même categorie

FENETRE DE LOGIN par kazma

MESSAGES VIRTUELS par grarestephane

ENVOIE DE MESSAGE AUTOMATIQUE par grarestephane

INFO BULLES STANDARD COMPATIBLE FF,IE,CHROME,OPERA SIMPLE D'... par alex3105

FENETRES DÉPLACABLES ET REDIMENSIONNABLE PAR LA SOURIS par pdc_666

Toutes les sources de la catégorie Fenêtre & Pop-up

Sources en rapport avec celle ci

FADING OBJETS HTML par Vedlen

FENETRE QUI SE DEPLACE par Ricky_MacElroy

POPUP INFOBULLE par hedi_tounsi

MISE À JOUR D'UNE LISTE DÉROULANTE VIA UN POPUP par ahcorad

FAUSSE POPUP DHTML 100% SEMBLABLE AUX VRAIES (APPARENCE ET F... par NEVERFORGET

Commentaires et avis

Commentaire de stfou le 23/03/2007 19:14:16

Bien, mais pour la difficulté de ce code, tu pourrai quand même faire un joli graphisme avec des bouton par exemple... 8/10

Commentaire de abdoulax le 23/03/2007 20:59:49

Ton code est bien trop compliqué juste pour faire apparaître un div. Un simple document.getElementById("window").style.display="block"; suffit. Ensuite l'utilisation d'un iframe pour charger la seconde page, ce n'est pas terrible. Tu ferais mieux d'utiliser AJAX.

Perso je t'aurai mis 4/10 mais je préfere pas te déscendre pour t'encourrager à optimiser ta source...

Have fun

Commentaire de nickadele le 23/03/2007 22:25:21 administrateur CS

Abdoulex,
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

Commentaire de kankrelune le 24/03/2007 11:52:17

@ Nickadele... le bug des select est corrigeable dans le cas d'une fausse popup masquant la page principale...

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°

Commentaire de nickadele le 24/03/2007 12:59:56 administrateur CS

Kankrelune,
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

Commentaire de PetoleTeam le 30/03/2007 13:08:17

Bonjour à tous...
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)

Commentaire de nickadele le 31/03/2007 08:14:07 administrateur CS

Bonjour,

Pour l'opacité :
filter: alpha(opacity=50); /* IE */
-moz-opacity: 0.5; /* Mozilla */
opacity: 0.5; /* CSS3 */
-khtml-opacity: .5; /* Safari */

Nickadele

Commentaire de fonetiklilian le 29/06/2007 12:51:27

Bonjour...

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

Commentaire de secobo le 30/06/2007 11:31:57

Il suffit de rajouter un document.body.scroll="no".

Commentaire de 1800toutanne le 06/07/2007 11:59:40

salut secobo..

tu pourrais juste me dire ou ajouter document.body.scroll="no". pour annuler le scroll stp?

d'avance merci

Commentaire de punkcity le 22/07/2007 20:00:04

Bonjour à tous,

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+" <br><a href='#fermer+la+fenetre' OnClick ='javascript:cachetout();'>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 <div id="overlay"></div> à place dans la page html sous <body>

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

Commentaire de winylourson le 23/08/2007 14:35:23

Pas de nouvelle version depuis Mars ;)

Et pour notre ami FireFox, comment kon fait pour ça fonctionne ? :D

Commentaire de aquewel le 02/10/2007 23:52:22

punkcity,

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

Commentaire de punkcity le 03/10/2007 11:39:11

Salut Aquewel,
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.

Commentaire de punkcity le 03/10/2007 11:57:45

Rectificatif : la modif n'apporte rien de plus a par de faire disparaitre totalement le scroll dans ie une fois le message affiché.

Je cherche une solus, et je l'ajoute des que j'ai trouvé !

Encore dsl

Commentaire de punkcity le 03/10/2007 14:14:05

C'est bon j'ai trouvé petite erreur de saisie faut laisser la fonction cachetout() comme elle était. Seul la partie montreoverlay(text) doit changer avec l'ajout de la ligne : document.getElementsByTagName("html")[0].style.overflow = 'hidden';

A plus tard.

PS : dommage de ne pas pouvoir éditer ses messages !!!

Commentaire de aquewel le 03/10/2007 23:13:11

c'est vraiment sympa de ta part de t'etre penché sur mon probleme

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

Commentaire de jecirbe le 20/12/2007 09:46:18

Merci pour ce très bon script. Petite question: j'ai légèrement modifié ce sript afin que la popup s'ouvre automatiquement mais est il possible de limité le nombre d'ouvertures, c'est à dire si le visiteurs va sur une autre page du site puis revient qu'il ne soit plus face à cette popup.
Merci d'avance pour un peu d'aide, au moins des pistes pour chercher sur google.

Commentaire de haflinger2 le 02/02/2008 16:58:21 9/10

bonjour
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

Commentaire de cossette le 03/05/2008 22:59:53

Je tes envoyer un message privee mais aucune reponse et jai aussi contacter les administrateurs de ce site mais encore la aucune reponse je vais donc lecrire ici en esperant que qulqun poura maider. Premierement je ne suis pas un pro ni en javascript ni en css ni html lol mais je commence a tres bien me debrouiller en html.
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

Commentaire de nickadele le 04/05/2008 10:53:57 administrateur CS

Bonjour Cossette,
le mieux c'est de poser ta question sur le forum !

Commentaire de cossette le 08/05/2008 17:10:43

Cets ce que jai fais et toujours pas de reponse personne peux maider a propos de cette popup ?
Ou une du meme genre lol

Commentaire de manathan le 22/05/2008 10:39:59

Dsl , j'etais en congès longue durée, loll , je vais modifié le code d'ici peu, pour le remplacer par celui de punkCity

merci beaucoup pour vos commentaires et la note aussi, et particulièrement punkCity qui a résolu le probleme d'iframe/compatibilité ie-mozilla .

Commentaire de aliki le 19/06/2008 15:33:39

Bonjour à tous,
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..

Commentaire de AnalchiK le 27/06/2008 17:08:09

Bonjour,

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

Commentaire de AnalchiK le 28/06/2008 03:46:25

Pff aprés pas mal d'heures et de cheveux en moins j'ai trouvé, pour ceux que ca intéresse il faut remplacer le CSS par ceci:

.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.

Commentaire de escobhar1 le 02/10/2008 17:37:39

Excellent script qu'ai utilisé . j'ai juste un petit soucis , j'aimerais que la page qui lance cette fausse pop s'actualise automatiquement à la fermeture de cette dernière.

Commentaire de aliki le 27/10/2008 11:30:15

Hello,
Quelqu'un pourrait-il m'aider?
J'aimerais intégrer le lien d'ouverture de ce script dans un lien flash.
Merci!

Commentaire de sammel le 10/02/2009 14:28:32 9/10

bonjour
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?

Commentaire de sammel le 10/02/2009 14:37:54

Commentaire de sammel le 10/02/2009 14:47:22

oups désolé j'ai mis 2 fois le commentaire quelle nouille que je suis lol

Commentaire de terifik le 12/04/2009 11:01:46

Salut à tous et joyeuse chasse aux oeufs!!
J'ai utilisé le code et ca marche à merveille sauf que j'aimerai pouvoir mettre le lien :

<a href = "#" OnClick = "affiche_overlay_window('./images/load.gif','page2.html');">afficher la page test 2</a>

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.

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

Besoin d'aide avec une fausse popup avec effet de transparence [ par cossette ] Bon moi jaurais besoin daide pour installer cette fausse popup avec effet de transparence --> http://www.javascriptfr.com/code.aspx?ID=41941sur mon fausse popup dhtml bug [ par scanner68 ] bonjour voila j'ai telecharger un script sur ce site mais il y a une erreur dans lescript et il n'est pas compatible avec firefox donc j'aimerais un p limité une fausse popup à une fois par visite [ par jecirbe ] Bonjour,J'ai utilisé un script javascript pour créer une fausse popup. Je me suis débrouiller ( un peu de script par ci un autre part là) pour que ce script pour message d'erreur / confirmation en fausse popup [ par olivier22068 ] bonjour a tousje cherche un script qui me permettrai de m'afficher des messages de confirmation ou d'erreur dans une sorte de fausse popup au milieu d Modifier une fausse popup avec calque [ par AnalchiK ] Bonjour à tous,Ma question concerne ce script:http://www.javascriptfr.com/codes/FAUSSE-POPUP-AVEC-EFFET-TRANSPARENCE_41941.aspxDa fausse popup [ par tirikou ] Bonjour,Après moult recherches, je n'arrive pas à trouver mon bonheur.Je suis tout à fait nul en javascript et n'arrive pas à trouver le bout de code Clique et recahrgement [ par BTAJV ] Salut tout le mondeVoila je pose un Topic car j'ai un petit probleme j'essaye de crée un lien qui envoi ver une popup (sa c simple et c fait) mais j'a Passage variable Popup à fenêtre mère. [ par Shenron42000 ] 'Soir à tous...Voila, j'ai un petit souci pour le passage d'une variable provenant d'une popup, à sa fenêtre mère...Je commence par le début, j'ai une A partir d'une popup, actualiser une page frame [ par fdthierry ] Bonjour,J'ai une page avec une frame1 et une frame2.La frame1 est le menu avec un lien ouvrant une popup Calendrier.Lorsque je clique sur une date, je Popup de popup [ par elpens ] Bonjour,J'ai une application asp qui me lance une popup (Windows.open(myPage.aspx)). Dans cette popup, j'ai un bouton qui devrait me permettre de recr