Visualizzazione dei risultati da 1 a 4 su 4
  1. #1

    overlay dinamico con jQuery

    Ciao a tutti,

    Vorrei un aiuto per riuscire ad ovviare ad un problema che ho riscontrato con un plugin jQuery che ho trovato sul web, ma che ho modificato per adattarlo alle mie esigenze, e che però non funziona a dovere.

    In sintesi, in uno dei miei siti web, devo far apparire nella pagina di registrazione degli utenti, registrazione.php, un overlay dinamico al caricamento della pagina.

    Fin qui tutto ok, il problema però avviene quando un utente erroneamente non compila un campo obbligatorio, o mette un email errata ecc, (tutti controlli che faccio con PHP) e preme sul pulsante INVIA, ed ecco che appare l'overlay dinamico con il box, dove ho inserito un avviso con delle info utili per il mio nuovo utente.
    mentre vorrei che NON apparisse più, avendo già informato il mio utente al momento del caricamento della pagina!.

    Se sbaglia ancora, ricompare sempre il box, cosa che risulta ovviamente fastidiosa!.

    Non so come dire a jQuery di far apparire il box SOLO ED ESCLUSIVAMENTE al caricamento della pagina, la prima volta e basta.

    Qui metto il codice CSS che uso:

    codice:
    .overlay2 {
        background: #000;
        position: fixed;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
        z-index: 100;
        cursor: pointer;
        /* Trasparenza */
        opacity: .7; 
    }
     
    #box2 { 
      width: 600px; 
      height: 400px; 
      background-color: #FFF; 
      display: none;
      z-index: +300; 
      position: absolute; 
      left: 20%;  
      right: 20%;  
      bottom: 700px;  
      /* Angoli arrotondati del box */
      border-radius: 15px;
    }
    
    #box2 hr {
         border-color: #CCCCCC;
            border-right: 0 solid #CCCCCC;
            border-style: solid;
            border-width: 1px 0 0; 
            width: 60%
    }
    
    .titolo_box
       margin-left: 40px;
       font-weight: bold;  
       font-size: 22px; 
     }
    
    .testo-box { 
      margin: 20px;
      width: 90%;  
    }
    
    /* Trasformo la x, per la chiusura box, in un elemento di blocco */  
    .chiudi {
       font-size: 18px; 
      color: #000; 
      font-weight: bold; 
      position: absolute; 
      right: 2%; 
      top: 0%;  
      cursor: pointer;
    }
    Questo invece il codice HTML che ho inserito nella pagina registrazione.php:

    codice HTML:
    <div class="overlay2" id="overlay2" style="display:none;"></div>
    e poi sotto:

    codice HTML:
    <div id="box2">
          <div class="titolo_box">Avviso importante</div>
                     <p class="testo-box">"Se avete problemi in fase di  registrazione, e <span class="grassetto_e_rosso">dopo qualche  minuto NON ricevete l'email per l'attivazione del vostro  account</span>, controllate con il vostro browser (Firefox, Chrome  ecc.) nello <span class="grassetto">spam</span> della  vostra email qui inserita, se il software del gestore del vostro  account, non l'abbia considerata appunto come tale. Infatti <span  class="sottolineato">alcuni programmi di posta etichettano quale  "spam" le email con i link attivi per pagine web.</span> Grazie.  "
                    </p>
                    <hr />
                 <p class="chiudi">X</p>
    </div>  <!--fine box-->
    Ecco il plugin jQuery che ho modificato, ed inserito tra <head> e </head> e l'ho chiamato jquery.overLay.js, e che non dovrebbe "ripresentarsi" ad ogni eventuale errore nella compilazione del form di un nuovo utente.

    codice:
     
    $(document).ready(function() {
                $('#overlay2').fadeIn('fast');
                $('#box2').fadeIn('slow');
            
                $(".chiudi").click(
                function(){
                $('#overlay2').fadeOut('fast');
                $('#box2').hide();
        });
            
                //chiusura emergenza 
                $("#overlay2").click(
                function(){
                $(this).fadeOut('fast');
                $('#box2').hide();
        });
          
    });
    Grazie in anticipo.
    Ciao.

  2. #2
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,131
    Vedi se questo esempio http://webprogetti.it/oscurapagina.asp può fare al caso tuo.
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  3. #3
    Ciao,
    Nell' esempio del form appare il box, ma per pochissimo. Non ho idea allora sul come fare a risolvere la cosa.
    ciao.

  4. #4
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,131
    Il codice è commentato, apportare modifiche al codice stesso non dovrebbe essere difficile anche per un profano
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.