Trucsweb.com

Trucsweb.com

Javascript

Les fenêtres ou l’objet WINDOW

RDFFav

PopUp automatique et fermeture - Avec l’événement onLoad

Je ne peux pas dire combien de fois ce script m’a été demandé. Il permet d’ouvrir une fenêtre de type PopUp automatiquement après un nombre de secondes prédéterminé. En plus d’offrir la possibilité de fermer le PopUp automatiquement après un nombre de secondes prédéterminé. Idéale pour afficher une bannière publicitaire comme chez Multimania...objets window popup automatique fenêtres open url onload close message bienvenue avertissement publicité réclame timer settimeout bodyPopUp automatique et fermeture - Avec l’événement onLoad

  • · Niveau : DÉBUTANT
  • · Compatibilité : Javascript 1.0

Je ne peux pas dire combien de fois ce script m’a été demandé. Il permet d’ouvrir une fenêtre de type PopUp automatiquement après un nombre de secondes prédéterminé. En plus d’offrir la possibilité de fermer le PopUp automatiquement après un nombre de secondes prédéterminé.

Idéale pour afficher une bannière publicitaire comme chez Multimania par exemple…

Le principe consiste à utiliser l’événement onLoad qui indique quand la page a été changée. Une fois l’événement détecté, nous exécutons la fonction PopUp qui part un TIMER selon le nombre de secondes désirées. C’est alors que la fonction Debute active le PopUp tout en fessant un autre TIMER si vous désirer fermer le PopUp automatiquement.

Vous pouvez déterminer la grandeur et la page affichée dans le PopUp ainsi que le temps de son ouverture et de sa fermeture s’il y a lieu. Le nom de la fenêtre « Pub » est utilisé pour ouvrir le PopUp et surtout pour pouvoir fermer le PopUp.

Vous pouvez modifier le code en bleu…

<html>
<head>

<script language="JavaScript">
<!-- Début
tempsFermeture = 10;
// Fermer le PopUp après 10 de secondes?
// Mettre 0 pour ne pas fermer le PopUp

function Debute(URL, WIDTH, HEIGHT) {
  propFenetre = "left=50,top=50,width=" + WIDTH + ",height=" + HEIGHT;
  pub = window.open(URL, "pub", propFenetre);
  if (tempsFermeture) setTimeout("pub.close();", tempsFermeture*1000);
}

function PopUp() {
  url = "URL du PopUp";
  width = 267; // largeur du PopUp en pixels
  height = 103; // hauteur du PopUp en pixels
  delay = 2; // temps en seconde avant l’ouverture du PopUp
  timer = setTimeout("Debute(url, width, height)", delay*1000);
}
// Fin -->
</script>
</head>

<body onLoad="PopUp();">

Page HTML courante...

</body>
</html>

Django (Oznog) Blais
Dernière mise à jour :

Commentaires

  • Bonjour, Je souhaite mettre un délai d'ouverture sur mon popup. Je précise je n'y connais rien, mais je cherche à comprendre. Copie partielle du script (il s'ouvre à l'ouverture de la page de mon site): Ou dois je placer la fonction setimeout? $(document).ready(function(){ if($('.tea-newsletter-popup').length > 0) { $('.tea-newsletter-popup').fadeIn(); } $('#tea-submit').click(function(){ var npemail = $('#tea-email-input').val(); var npaction = $('.tea-form').attr('action'); $('.tea-alert').remove(); $('.tea-loading-div').show(); $.ajax({ url : npaction, type : 'post', dataType : 'json', data : { npemail : npemail }, Merci d'avance Jérome
    64x64
    jerome
    Date (GMT) : 2016-10-15 19:39:13 (UTC +0000)
    • Salut, Ton délai c'est pour 1. afficher la fenêtre modale quand le formulaire part 2. pour ensuite la fermer automatiquement après x secondes ? Merci.
      64x64
      oznog
      Date (GMT) : 2016-10-16 19:46:48 (UTC +0000)


    • Salut, Je souhaiterais créer un popup qui va s'afficher principalement sur la page d'accueil. Je voudrais que vous m'aidiez à trouver le code qui permet cela. Merci
      64x64
      Harold
      Date (GMT) : 2017-03-14 14:29:4 (UTC +0000)

      • POPUP HTML <body onload="window.location.href = '#openModal';"> <div id="openModal" class="modalDialog"> <div> <a href="#close" title="Close" class="close">Accéder au site</a> <h2>Ma petite Modal Box</h2> <p>Voic ma modalbox!!!</p> <p>Alors !!bien ou bien!!</p> </div> </div> CSS .modalDialog { position: fixed; font-family: Arial, Helvetica, sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.8); z-index: 99999; opacity:0; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; pointer-events: none; } .modalDialog:target { opacity:1; pointer-events: auto; } .modalDialog > div { width: 400px; position: relative; margin: 10% auto; padding: 5px 20px 13px 20px; border-radius: 10px; background: #fff; background: -moz-linear-gradient(#fff, #999); background: -webkit-linear-gradient(#fff, #999); background: -o-linear-gradient(#fff, #999); } .close { background: #606061; color: #FFFFFF; line-height: 25px; text-align: center; float: right; width: 112px; text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; } .close:hover { background: #00d9ff; }
        64x64
        MARIUS
        Date (GMT) : 2018-10-23 12:51:04 (UTC +0000)
        Date local : Tue Oct 23 2018 12:57:51 GMT+0000
        • Salut Marius, Ton code est bon, mais ce n'est pas dans le bon tutoriel, il n'y a pas une seule ligne de JavaScript dans ton code. Ce tutoriel (qui a près de 20 ans !!!) concerne plutôt le popup avec l'objet window en JavaScript. Il y a aussi un tutoriel pour les fenêtres dites « modales » comme ton exemple : http://www.trucsweb.com/tutoriels/css/css-modal/ Merci.
          64x64
          oznog
          Date (GMT) : 2018-10-23 16:38:45 (UTC +0000)
          Date local : Tue Oct 23 2018 12:45:32 GMT-0400


        • Bonjour, J'aimerais trouver une solution pour faire un popup avec la fonction timer comme indiquée ci-dessus mais qui ouvrirait une fenêtre modale sur le même site. Cf ci-dessous, j'ai changé la fonction window.open par window.location.assign. La page voulue s'ouvre bien mais pour une raison qui m'échappe le timer ne marche pas dans ce cas de figure. La page ouverte ne se ferme pas au bout de 10sec pour nous rediriger vers la page de base. Pouvez-vous m'aider ? Merci <html> <head> <script language="JavaScript"> <!-- Début tempsFermeture = 10; // Fermer le PopUp après 10 de secondes? // Mettre 0 pour ne pas fermer le PopUp function Debute(URL, WIDTH, HEIGHT) { propFenetre = "left=50,top=50,width=" + WIDTH + ",height=" + HEIGHT; pub = window.location.assign(URL, "pub", propFenetre); if (tempsFermeture) setTimeout("pub.close();", tempsFermeture*1000); } function PopUp() { url = "....."; width = 267; // largeur du PopUp en pixels height = 103; // hauteur du PopUp en pixels delay = 0.2; // temps en seconde avant l’ouverture du PopUp timer = setTimeout("Debute(url, width, height)", delay*1000); } // Fin --> </script> </head> <body onLoad="PopUp();"> Page HTML courante... </body> </html>
          64x64
          Brandnomore
          Date (GMT) : 2021-02-16 18:43:11 (UTC +0000)
          Date local : Tue Feb 16 2021 19:47:34 GMT+0100 (heure normale d
          • Salut, C'est normal, la fonction n'existe plus une fois la page ouverte. Tu n'ouvres pas une nouvelle page (modale) qui peut être contrôlée par la page du script (page courante). C'est-à-dire un popup « enfant » de la page courante. Tu remplaces carrément la page du script (page courante) par une nouvelle page. Ainsi, la page du script (page courante) n'existe plus et son script non plus. En fait, ton script revient à faire un simple lien. window.location permet seulement d'ouvrir une nouvelle page. window.location.assign fait la même chose, mais en plus il détruit la page courante de l'historique. On ne peut même pas faire de retour en arrière. C'est impossible de faire ce que tu demandes avec cette méthode. Il faudrait m'expliquer ce que tu veux faire et pourquoi pour trouver comment le faire. Tu peux lire ces deux tutoriels sur la fenêtre modale en CSS plus flexible : Fenêtre « modal responsive » en pure CSS3 http://www.trucsweb.com/tutoriels/css/css-modal/ Le flyout ou la fenêtre modale fixe et adaptative en pure CSS http://www.trucsweb.com/tutoriels/css/css-flyout/
            64x64
            oznog
            Date (GMT) : 2021-02-16 19:19:24 (UTC +0000)
            Date local : Tue Feb 16 2021 14:23:46 GMT-0500 (heure normale d


          Ajouter un commentaire
          Votre adresse de courriel ne sera pas publiée. * L'astérisque indique les champs obligatoires.
          Votre évaluation du tutoriel

                 Visites : 29037 - Pages vues : 209265

          En ligne depuis 27 ans (1997-2024)

          Le plus vieux site francophone pour freelances!

          Il y a 10 types de personnes, ceux qui comprennent le binaire et ceux qui ne le comprennent pas ;-)

          RSS

          Aider les Trucsweb

          PayPal - la solution de paiement en ligne la plus simple et la plus sécurisée !
          aiement en ligne sécurisée PayPal Vérifié par PayPal
          Étiquettes
          objetswindowpopupautomatiquefenêtresopenurlonloadclosemessagebienvenueavertissementpublicitéréclametimersettimeoutbody
          outils
          1. Generateur Trucsweb
          2. Glossaire
          3. jQuery : Équivalent Javascript
          4. HTML5 : Liste des balises
          5. HTML5 : Formation pour débutant
          6. AbuseIPDB AbuseIPDB
          7. Phishing-initiative Initiative hameçonnage (Phishing initiative)
          Références
          1. W3C HTML5
          2. W3C HTML 4.0
          3. W3C CSS Level 3
          4. W3C CSS LEVEL 2.1
          5. W3C XHTML 1.0
          6. W3C SMIL 2.0
          7. W3C XML 1.0
          8. W3C The Extensible Stylesheet Language Family (XSL)
          9. W3C XPath 3.0
          10. W3C XSL Version 1.1
          11. W4C XSLT 2.0
          12. RFC Editor Site
          13. Web Design Group
          14. Treehouse: Development Courses
          15. W3Schools
          16. W3CTutorial
          17. XML Cover Pages
          18. The W3C Markup Validation Service
          19. Validateur de syntaxe Javascript Esprima
          20. Validateur JavaScript Lint
          21. Le meilleurs Validateur JavaScript Code Beautify
          22. Real Favicon checker
          23. Local Business Schema Generator
          24. Générateur de microdonnées
          25. Testing Tool — Google Developers
          26. Google - Outil de test du balisage d'e-mails
          27. Google - Search Console (webmasters/tools)
          28. PageSpeed Insights
          29. RDFa Distiller and Parser
          30. RDF extracteur (pyRDFa)
          31. Soumettre votre URL à Google
          32. Soumettre votre URL à Bing
          33. Soumettre votre URL à Yahoo
          34. FXSL - Functional Programming Library for XSLT
          35. Wikipedia - Internet media type
          1. Mozilla Developer Network JavaScript reference
          2. VBScript Quick Reference
          3. ASP.NET Reference
          4. JCSS & Javascript Character Entity Calculator
          5. JScript Reference
          6. Hammer.min.js
          7. ASP Object Quick Ref.
          8. ADO API Reference
          9. IIS Configuration Reference
          10. MSDN Library
          11. Bootstrap
          12. Bootsnipp
          13. Bootstrap Cheat Sheets
          14. Iconic
          15. Zurb Foundation 5
          16. Skeleton
          17. Responsive CSS Framework Comparison
          18. HTML5 Boilerplate
          19. Modernizr
          20. Normalize.css
          21. Eric Meyer's CSS reset
          22. Bootstrap (français)
          23. Jasny Bootstrap
          24. jQuery
          25. DataTables | Table plug-in for jQuery
          1. HTML 4.0 code de caractères
          2. Unicode fonts
          3. Manuel PHP
          4. Documentation Perl
          5. ActionScript® 3.0 Reference
          6. MySQL Reference Manuals
          7. Find My Facebook Page ID
          8. Get a User's Twitter ID
          9. Share Link Generator!
          10. Validation de courriel
          11. G Suite Toolbox Check MX
          12. G Suite Toolbox Messageheader
          13. SPF Syntax Validator
          14. SPF Record Testing Tools
          15. La Loi canadienne anti-pourriel
          16. DNS / nameserver (requête en ligne)
          17. Whatsmydns.net (Propagation DNS globale)
          18. MXtoolbox.com
          19. DNSstuff.com
          20. SHAAAAAAAAAAAAA - Détection de certificat SHA-1
          21. Décoder Hachage MD5, SHA-1, LM, NTML
          22. Get Lat Long from Address
          23. Java Language Spec.
          24. Sun Java
          25. JSP Standard Tag Library
          26. C++ Language Reference
          27. C# Reference
          28. Les Navigateurs
          29. Terminologie d'Internet
          30. IP Location tools
          31. Open Port Check Tool
          32. Webfont generator
          33. HSL picker
          34. Zone Accro
          35. Dictionnaire de la langue française de l'internaute.com
          36. Glossaire informatique anglais/français
          37. Correcteur d'orthographe et grammaire Reverso
          38. Google Traduction
          39. JavaScript: Escaping Special Characters
          40. Online JavaScript/CSS Compression Using YUI Compressor
          41. Minify your CSS
          42. JS & CSS Minifier
          43. CSS Inliner Tool
          44. Base64 encoder and decoder
          45. Hachage MD5, SHA-1, LM, NTML
          46. Javascript HTML Page Encoder
          47. Winmail.dat Reader
          Oznog

          Blogueur, analyste-programmeur et designer Web!
          Conception Oznogco Multimédia
          X

          Trucsweb.com Connexion

          Connexion

          X

          Trucsweb.com Mot de passe perdu

          Connexion

          X

          Trucsweb.com Conditions générales

          Conditions

          Responsabilité

          La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

          Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

          Droit applicable et juridiction compétente

          Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

          X

          Trucsweb.com Trucsweb

          X

          Trucsweb.com Glossaire

          X

          Trucsweb.com Trucsweb

          X

          Trucsweb.com Trucsweb

          Conditions

          Aucun message!

          Merci.

          X
          Aucun message!
          X

          Trucsweb.com Créer un compte

          Créer un compte

          .
          @