begin process at 2008 08 20 17:51:51
1 229 001 membres
360 nouveaux aujourd'hui
14 259 membres club

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é: 19 268 / 3 631

Note :
9 / 10 - par 5 personnes
9,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10

Commentaire sur cette source (26)
Ajouter un commentaire et/ou une note

Description

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.

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

Télécharger le zip

  • signaler à un administrateur
    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

  • signaler à un administrateur
    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

  • signaler à un administrateur
    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

  • signaler à un administrateur
    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°

  • signaler à un administrateur
    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

  • signaler à un administrateur
    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)

  • signaler à un administrateur
    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

  • signaler à un administrateur
    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

  • signaler à un administrateur
    Commentaire de secobo le 30/06/2007 11:31:57

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

  • signaler à un administrateur
    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

  • signaler à un administrateur
    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

  • signaler à un administrateur
    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

  • signaler à un administrateur
    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

  • signaler à un administrateur
    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.

  • signaler à un administrateur
    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

  • signaler à un administrateur
    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 !!!

  • signaler à un administrateur
    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

  • signaler à un administrateur
    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.

  • signaler à un administrateur
    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

  • signaler à un administrateur
    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

  • signaler à un administrateur
    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 !

  • signaler à un administrateur
    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

  • signaler à un administrateur
    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 .

  • signaler à un administrateur
    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..

  • signaler à un administrateur
    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

  • signaler à un administrateur
    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.

Ajouter un commentaire

Pub



Appels d'offres

Recherche developpeur ...
Budget : 700€
campagne Adwords
Budget : 5 000€
Boite echanges securis...
Budget : 500€

CalendriCode

Août 2008
LMMJVSD
    123
45678910
11121314151617
18192021222324
25262728293031

Boutique

Boutique de goodies CodeS-SourceS