JQuery Overlay Loads only one time

Question

I am writting a web application in which I want to load the JQuery over lay programatically on onClick event of a div. here is div html code

<div class="button_left"
            onClick="manageAlert('/abc/com')"><span>Click here</span></div>

and here is the overlay div

<div id="ad_alert_wizard">This is test</div>

and JavaScript code is as follows.

function manageAlert(url)
{
    if(url=="")
    {
          $("#ad_alert_wizard").overlay({
                // custom top position
                top: 260,

                // some mask tweaks suitable for facebox-looking dialogs
                mask: {

                    // you might also consider a "transparent" color for the mask
                    color: '#000000',

                    // load mask a little faster
                    loadSpeed: 200,

                    // very transparent
                    opacity: 0.5
                },

                // disable this for modal dialog-type of overlays
                closeOnClick: false,

                //load it immediately after construction
                load: true
            });
    }
    else
    {
        location.href=url;
    }
}

now the problem is this, when I click on the div the overlay loads first time properly... and after closing it, when I click again on the div it don't load untill I refresh the page. What might be the error.. I am using JQuery Tools for overlay.

Answer 1

If I correctly understand your question, you want to control your overlay when to load it and when close it, depends on some conditions. As it said on jQuery tools site, all it's elements has some API, and you have to use it. First of all, create and setup your overlay, I recommend to use $(document).ready, like this:

$(document).ready(function () {
          //create vars for some performance reasons
          var adwiz = $("#ad_alert_wizard"),
              adOver = {};

          //setup your overlay object;
          adwiz.overlay({
                //do not load it automatically;
            load: false
                //... some other configuration options ...  
          });

          //take access to the overlay object and it's API;
          adOver = adwiz.data('overlay');

          //It's your click handler function
          // You can control your overlay as you wish.
         function manageAlert(url){
           if(url==""){
            adOver.load(); //show your overlay whenever you want
           }
          else{
            location.href=url;
          }
    }

 // set your event handlers inside the script, not in the DOM element (it's not cool)
    $('.button_left').click(function () {
        manageAlert(''); // call your handler function
    })
})

Code can be refactored, but an idea is to get access to your overlay object to control it.