Trucsweb.com

Trucsweb 1997-2017 - 20 ans de partage.

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 body

  • · 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
      http://www.trucsweb.com
      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
        https://www.hardware-11.webself.net
        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
          http://www.trucsweb.com
          Date (GMT) : 2018-10-23 16:38:45 (UTC +0000)
          Date local : Tue Oct 23 2018 12:45:32 GMT-0400


               Visites : 14206 - Pages vues : 194061
        X

        Trucsweb.com Connexion

        X

        Trucsweb.com Mot de passe perdu

        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