This may not be possible or I'm approaching the situation entirely wrong but what I have is 2 hidden divs that I display in a pseudo-modal manner ontop of another form. Each div is bound to a hidden button that is .click() from another script depending on certain checkboxes being checked. The situation I'm having is both buttons are being clicked simultaneously and I'd rather they be clicked sequentially so the end user sees the hidden div displayed, then the div is re-hidden and the second div is then displayed and re-hidden.

The code looks like this (its part of a much much bigger (ie 375kb) Perl script that I'm trying to breath new life into and my company refuses to do away with)..

code that calls the buttons:

1.             // quick function to click the button
               function btnClick(button) {
                   var butt = document.getElementById(button);
                   butt.click();
               }
               
               // Check if the customer is marked for Direct to Agent support and run
               // alert if necessary.
               var dtoA = document.getElementById('abfield32');
               if (dtoA.checked == true) {
                   btnClick('btn_dta');
               }
               
               // Check if the customer is marked for Self Hardware
               // alert if necessary.
               var shw = document.getElementById('abfield33');
               if (shw.checked == true) {
                   btnClick('btn_shw');
               }
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

The jQuery that handles opening the toggling the divs hidden or open and populating certain elements of the divs with input items from the main page.

1. var popupStatus = 0;
   
   //disabling popup with jQuery magic!
   function closePopup(){
       //disables popup only if it is enabled
       if(popupStatus==1){
           $("#backgroundPopup").fadeOut("fast");
           $("div[ id ^= 'popup' ]").fadeOut("fast");
           //$(div:*="#popup_box").fadeOut("fast");
           popupStatus = 0;
       }
   }
   
   //centering popup
   function centerPopup(box){
       //request data for centering
       var windowWidth = $(document).width();
       var windowHeight = $(document).height();
       var popupHeight = $(box).height();
       var popupWidth = $(box).width();
       //centering
       $(box).css({
           "position": "absolute",
           "top": "50%",
           "left": "50%",
           "margin-left": popupWidth / -2,
           "margin-top": popupHeight / -2
       });
       //only need force for IE6
       $("#backgroundPopup").css({ "width": windowWidth, "height": windowHeight });
       // load the popup    
       loadPopup(box);
   }
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
2. // open the popup now that its centered.
   function loadPopup(box){
       //loads popup only if it is disabled
       if(popupStatus==0){
           var pName = $("#abfield0").val();
           var hwPhone = $("#abfield15").val();
           var hwExec = $("#abfield25").val();
           $("span[ id *= 'Holder' ]").html(pName);
           $("#tmpHWPhone").html(hwPhone);
           $("#txtHwExec").text(hwExec);
           $("#backgroundPopup").css({ "opacity": "0.7" });
           $("#backgroundPopup").fadeIn("fast");
           $(box).fadeIn("fast");
           popupStatus = 1;
       }
   }
   
   // make it work..
   $(document).ready(function() {
   
       // direct to agent button
       $("#btn_dta").click(function(){
           centerPopup("#popup_dta");
           return false;
       });
       
       // self hardware button
       $("#btn_shw").click(function(){
           centerPopup("#popup_selfhw");
           return false;
       });
       
       // close 'X' anchor, background, close button
       $("a[id ^= 'close_it'], #backgroundPopup, input[id ^= 'closeIt']").click(function(){
           closePopup();
       });
       
       // press escape to close
       $(document).keypress(function(e){
           if(e.keyCode== '27' && popupStatus==1){ closePopup(); }
       });
   });
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

I'm not sure if my approach is right or not, I'm still pretty green working with javascript. Any advice or insight would be greatly appreciated on how to have btn_dta click, run and close and then btn_shw click, run and close in sequence.

-santo