2013-06-27 2 views
0

Je souhaite que ma page html affiche une boîte de dialogue de bienvenue lorsque j'entre pour la première fois dans la page. Je ne veux pas que la boîte de dialogue apparaisse chaque fois que je charge la page. Je ne connais que html, css et javascript. est-il possible d'arrêter cette boîte de dialogue apparaissant à chaque fois?comment faire apparaître la boîte de dialogue de bienvenue apparaissant une fois avec html/javascript?

<body onload="welcome()"> 
    <h1> Hellow World /h1> 
    <script> 
      function welcome(){ 
    alert(" WELCOME TO Music.COM"); 
     } 
    </script> 
    </body> 

Chaque fois que je recharge la page, la boîte de bienvenue apparaît à nouveau. Comment l'arrêter?

+8

Lire sur les cookies – sachleen

+3

http: // www.w3schools.com/js/js_cookies.asp – abc123

+0

pouvez-vous m'aider avec un exemple? – Giliweed

Répondre

1

DEMO: http://jsfiddle.net/abc123/JYsdN/1/

Modifier: commentaires ajouté

JS:

//Gets the cookie with given c_name taken from w3school 
function getCookie(c_name) { 
    var c_value = document.cookie; 
    var c_start = c_value.indexOf(" " + c_name + "="); 
    if (c_start == -1) { 
     c_start = c_value.indexOf(c_name + "="); 
    } 
    if (c_start == -1) { 
     c_value = null; 
    } else { 
     c_start = c_value.indexOf("=", c_start) + 1; 
     var c_end = c_value.indexOf(";", c_start); 
     if (c_end == -1) { 
      c_end = c_value.length; 
     } 
     c_value = unescape(c_value.substring(c_start, c_end)); 
    } 
    return c_value; 
} 

//Sets the cookie with given c_name to given value for exdays taken from w3school 
function setCookie(c_name, value, exdays) { 
    var exdate = new Date(); 
    exdate.setDate(exdate.getDate() + exdays); 
    var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString()); 
    document.cookie = c_name + "=" + c_value; 
} 

//Function for GUID creation 
function s4() { 
    return Math.floor((1 + Math.random()) * 0x10000) 
      .toString(16) 
      .substring(1); 
}; 

//Function for GUID creation 
function guid() { 
    return s4() + s4() + '-' + s4() + '-' + s4() + '-' + 
     s4() + '-' + s4() + s4() + s4(); 
} 

//Checks if the user has the cookie 
function checkCookie() { 
    //attempts to get the cookie 
    var user = getCookie("user"); 
    //If the user doesn't have a cookie 
    if (user == null || user == "") { 
     //Welcome them 
     alert("Welcome!!!"); 
     //Create a GUID 
     user = guid(); 
     //Set the user's cookie to their GUID expiring in 365 days 
     if (user != null && user != "") { 
      setCookie("user", user, 365); 
     } 
    } 
} 

//on document.ready call checkCookie 
checkCookie(); 
0

Vous pouvez créer un cookie qui durerait jusqu'à la fin de la session des utilisateurs sur votre page. De cette façon, s'ils rafraichissaient la page, leur session n'aurait pas pris fin et la boîte ne s'afficherait pas. Voici un lien vers un tutoriel de cookies simple http://www.w3schools.com/js/js_cookies.asp

+3

S'il vous plaît ne pas se référer à w3schools ([w3fools] (http://www.w3fools.com/)) il y a de meilleures sources sur le web. –

3

Eh bien, cela semble être un problème car JS ne peut stocker que des données dans des sessions/cookies qui ne dureront pas éternellement mais - il y a une façon dont je peux penser (sauf les cookies) .

Vous pouvez utiliser le localStorage pour enregistrer que l'utilisateur a déjà vu le dialogue. OU vous pouvez commencer à apprendre node.js - son Javascript mais pour la programmation côté serveur.

0

En utilisant simplement html et javascript, vous devez utiliser des cookies.

Définissez un cookie et affichez le div s'il ne l'a pas déjà été sur le site. D'autre ne fait rien.

http://jsfiddle.net/Qm58q/

var cookie = "myCookies"; 
    if(!getCookie(cookie)){ 
     document.getElementById('welcome').className = "show"; 
     setCookie(cookie,"true",1) 
    } 


showWelcome(); 
1

Dans le passé, je l'ai utilisé le jQuery cookie plugin. Voici un exemple de la façon dont le code ressemblerait:

//check for cookie - https://github.com/carhartl/jquery-cookie 
if ($.cookie('FirstTime') !== 'close') { 

    //show promo pop-up 

    $('.promoCloseButton').click(function() { 

     //hide promo 

     //set cookie on close 
     $.cookie('FirstTime', 'close', { 
     path : '/', 
     expires : 120 
     }); 

    }); 

    } 
+0

cette question n'est pas marquée avec une balise jQuery, veuillez vous abstenir d'utiliser un framework que l'utilisateur ne demande pas. – abc123

+0

Je n'ai pas encore appris jQuery. – Giliweed

Questions connexes