jQuery popup not working in IE7

Question

I'm using the following to create a popup layer so user can enter information :

/*
 * Guidelines to use this js file
 * 1. do not change function doBubblePopUp
 * 2. add specific task for your module in doModuleSpecificTask
 * 3. write appropriate module function defined in 2
 * 4. for form submission use document ready for submit, check code for message
 * 
 * JSP requirements:
 * 1. Main div should be ebodyModule_XXXXXX, where XXXXXX is your module identifier
 * 2. If using lead id for display purpose, the div id should be 
 *    popupDisplayLeadId_XXXXXX, where XXXXXX is your module identifier
 *
 * 
 */

function doBubblePopUp(myId, moduleId){

 var myWidth = 0, myHeight = 0;
 var centerX = 0, centerY = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth - 430;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth - 430;
    myHeight = document.body.clientHeight;
}

 var centerX = (myWidth / 2); 
    var centerY = (myHeight / 2) - 275;

  var divIdentifier = "#ebodyModuleMain";
  var innerDivIdentifier = "#ebodyModule_"+moduleId;
  var popupDisplayLeadId = "#popupDisplayLeadId_"+moduleId;
  var grayBackgroundDiv = "#holderPop";

    hideAllInnerDiv();

   $(grayBackgroundDiv).show();

     $(divIdentifier).css({ 
   left: centerX,
   top: centerY
      }).show();

   /*
     $(divIdentifier).css({ 
        opacity:1,
        left: centerX,
        top: centerY
         }).fadeIn(1500);
 */
      $(document).one("click", function(f) {
       closeBubblePopUp();
      });

      $(innerDivIdentifier).show();
      $(popupDisplayLeadId).html(myId);

      doModuleSpecificTask(myId, moduleId);  

   // STOP the menu from disappearing when it is clicked
   $(divIdentifier).bind("click", function(e) { e.stopPropagation(); });
   //stop the main div from disappearing when datepicker is clicked.
   $("#ui-datepicker-div").bind("click", function(e) { e.stopPropagation(); });
   $(":checkbox").bind("click", function(e) { e.stopPropagation(); });
   $(divIdentifier).draggable();
   $(divIdentifier).draggable('option', 'cancel', innerDivIdentifier);
}

function closeBubblePopUp(){
 var divIdentifier = "#ebodyModuleMain";
 var grayBackgroundDiv = "#holderPop";
    $(grayBackgroundDiv).hide();
 //$(divIdentifier).fadeOut("slow");
    $(divIdentifier).hide();
}

function doModuleSpecificTask(myId, moduleId){
 switch(moduleId) {
 case "TaskAdd":
  doTaskAdd(myId);
  break;
 }
}



function doTaskAdd(leadId){
 $("#popupHiddenLeadId__TaskAdd").val(leadId);
}


function hideAllInnerDiv(){
 $("#ajaxInProcess").hide();
 $("#ajaxResponseMessage").hide();
 $(".ebodyModuleInnerDiv").hide();
}

this works ok on FireFox and pretty well on Safari, however on IE7 all i get is a darkened screen with the popup section there but not usable.

also if there is piece of code i can use to close this window if its not wanted ?