2010-09-29 3 views
0

Ok J'ai le code ci-dessous, ce qui me permettra soit de cliquer sur le lien, soit de survoler le lien pour afficher le pop-up . Je voudrais pouvoir l'éditer pour l'ouvrir au chargement de la page. Je voudrais également pouvoir l'ouvrir une seule fois par visiteur et par semaine.Comment créer un pop-up css personnalisé pour ouvrir le chargement de la page une fois par visiteur par semaine

Je suis nouveau dans ce domaine, donc toute aide serait géniale!

Merci

<head> 

<style type="text/css"> 
#fade { 
    display: none; 
    background: #000; 
    position: fixed; left: 0; top: 0; 
    z-index: 10; 
    width: 100%; height: 100%; 
    opacity: .80; 
    z-index: 9999; 
} 
.popup_block{ 
    display: none; 
    background: #fff; 
    float: left; 
    font-size: 1.2em; 
    position: fixed; 
    padding: 20px;  
    border: 20px solid #ddd; 
    top: 50%; left: 50%; 
    z-index: 99999; 
    -webkit-box-shadow: 0px 0px 20px #000; 
    -moz-box-shadow: 0px 0px 20px #000; 
    box-shadow: 0px 0px 20px #000; 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
} 
img.btn_close { 
    float: right; 
    margin: -55px -55px 0 0; 
} 
.popup p { 
    padding: 5px 10px; 
    margin: 5px 0; 
} 
/*--Making IE6 Understand Fixed Positioning--*/ 
*html #fade { 
    position: absolute; 
} 
*html .popup_block { 
    position: absolute; 
} 
</style> 

</head> 
<body> 

<a href="#?w=200" rel="popup1" class="poplight">Hover to see pop-up</a> 

<div id="popup1" class="popup_block"> 
TEST  
</div> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 

    //When you click on a link with class of poplight and the href starts with a # 
    $('a.poplight[href^=#]').hover(function() { 
     var popID = $(this).attr('rel'); //Get Popup Name 
     var popURL = $(this).attr('href'); //Get Popup href to define size 

     //Pull Query & Variables from href URL 
     var query= popURL.split('?'); 
     var dim= query[1].split('&'); 
     var popWidth = dim[0].split('=')[1]; //Gets the first query string value 

     //Fade in the Popup and add close button 
     $('#' + popID).fadeIn().css({ 'width': Number(popWidth) }).prepend('<a href="#" class="close"><img src="http://www.sohtanaka.com/web-design/examples/modal-window/close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>'); 

     //Define margin for center alignment (vertical + horizontal) - we add 80 to the height/width to accomodate for the padding + border width defined in the css 
     var popMargTop = ($('#' + popID).height() + 80)/2; 
     var popMargLeft = ($('#' + popID).width() + 80)/2; 

     //Apply Margin to Popup 
     $('#' + popID).css({ 
      'margin-top' : -popMargTop, 
      'margin-left' : -popMargLeft 
     }); 

     //Fade in Background 
     $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag. 
     $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer 

     return false; 
    }); 


    //Close Popups and Fade Layer 
    $('a.close, #fade').live('click', function() { //When clicking on the close or fade layer... 
      $('#fade , .popup_block').fadeOut(function() { 
      $('#fade, a.close').remove(); 
    }); //fade them both out 

     return false; 
    }); 


}); 

</script> 

</body> 

Répondre

1

Vous devez inclure dans le tableau utilisateur la dernière fois qu'ils ont été présentés le menu contextuel. Ensuite, chaque fois qu'un utilisateur visite le site pour la première fois (ou se connecte), vérifiez l'horodatage actuel par rapport au dernier horodatage contextuel. Si c'est une semaine, affichez la fenêtre contextuelle et mettez à jour l'horodateur contextuel de l'utilisateur à l'horodatage actuel.

+0

Je ne sais pas comment faire cela pourriez-vous expliquer un peu plus ou me montrer un exemple de code? – Collin

+0

vous devrez connaître une langue côté serveur. Quelle langue côté serveur connaissez-vous? – Galen

Questions connexes