Dynamic ovelay with jQuery

Dynamic ovelay with jQuery

Hi everybody,

I need some help because I modified a jQuery plugin I found on the Internet, and it works as it should, but I noticed a problem, that's the plugin correctly opens a window to show a warning for the users that want to register in my website, but this window always appears every time the page is reloaded, that's to say when the user who's trying to fill in the fields of my form, makes a mistake and he sends out the form.

The page is reloaded and I show him the mistake he made ( I control all the fields with PHP), but the warning obtained with jQuery appears again, even if this is, of course, undesidered.

I don't know how to say the jQuery plugin to show the window just the first time  when the webpage is loaded!.

I think I can do that creating a variable in the plugin when the form is submitted for the first time, and then checking out if it exists, not to let the window appear again.

I tried to do that, but I failed.

Hope somebody can help me.

Here's the CSS code I use:

  1. .overlay2 {
        background: #000;
        position: fixed;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
        z-index: 100;
        cursor: pointer;
        opacity: .7;
    }
     
    #box2 {
        width: 600px;
        height: 400px;
        background-color: #FFF;
        display: none;
        z-index: +300;
        position: absolute;
        left: 20%; 
        right: 20%; 
        bottom: 700px;       
        border-radius: 15px;
    }

    #box2 hr {
           border-color: #CCCCCC;
         border-right: 0 solid #CCCCCC;
         border-style: solid;
         border-width: 1px 0 0;
        width: 60%
    }

    .title_box
         margin-left: 40px;
         font-weight: bold;   
         font-size: 22px;
     }

    .text-box {
        margin: 20px;
        width: 90%;   
    }


    .close {
         font-size: 18px;
        color: #000;
        font-weight: bold;
        position: absolute;
        right: 2%;
        top: 0%; 
        cursor: pointer;
    }




















































This is the HTML code in my registrazione.php page:


  1. <div class="overlay2" id="overlay2" style="display:none;"></div>

and then:

  1. <div id="box2">
                <div class="title_box">Avviso importante</div>
                        <p class="text-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="close">X</p>
    </div>  





and this is the plugin I called jquery.overLay.js I modified and put between the <head> </head> tags:


  1. $(document).ready(function() {
                $('#overlay2').fadeIn('fast');
                $('#box2').fadeIn('slow');
           
                $(".close").click(function(){
                $('#overlay2').fadeOut('fast');
                $('#box2').hide();
        });       
               
                $("#overlay2").click(function(){
                $(this).fadeOut('fast');
                $('#box2').hide();
        });
         
    });   
















I tried to change it this way, as I said above, but it doesn't work:

  1. $(document).ready(function() {
        $("#form_register").submit(function(){
            var foo = 'hi';
            if ( foo )
                {
                    $('#overlay2').fadeOut('fast');
                    $('#box2').hide();
                }       
        });
    $('#overlay2').fadeIn('fast');
                $('#box2').fadeIn('slow');

        $(".close").click(
            function(){
                $('#overlay2').fadeOut('fast');
                $('#box2').hide();
        });
           

        $("#overlay2").click(
            function(){
                $(this).fadeOut('fast');
                $('#box2').hide();
        });
         
    });   
      


























Here's the link to my page of  my web page it's only in Italian, but nonetheless you can see the undesidered behavior I described above, if you make a mistake filling in a field of the form and you send it out.

Thanks for your help.
Bye.