Problem mit overlay über die Seite

[steffen]

Hallo Forumleser,

ich erstelle mit JQuery ein Overlay über die komplette Seite.

$("body")  
.append('<div id="cl-entry-layer" style="position: absolute; top: 0; left: 0; z-index: 10;"></div><div id="cl-entry-wrap" style="position: absolute; width: 100%; top: 0; left: 0; z-index: 20;"><div id="cl-entry" style="position: relative; z-index: 91;padding: 20px; margin: 0 auto; margin-top: 20px; width: 600px; background-color: #fff; border: 1px black solid;"></div></div>');

Jetzt soll das Overlay wieder entfernt werden, wenn irgendwo auf die seite geklickt wird außerhalb des divs #cl-entry.

Zuerst habe ich das so gelöst:

$("#cl-entry-layer, #cl-entry-wrap").click( function(){  
 _finish();  
});  
$("#cl-entry").click( function(){  
 return false;  
});  
function _finish() {  
$('#cl-entry-layer, #cl-entry-wrap').remove();  
}

Wobei jedoch in dem div keinerlei Aktionen (z.B. submit) gemacht werden können.

Dachte ich mir nagut! Setz du einfach eine globale variable, die bei mousein("cl-entry") auf false gesetzt wird und bei mouseout("cl-entry") auf true gesetzt wird und überprüfst die variable in _finish():

function _finish() {  
 if(cl_close == true)$('#cl-entry-layer, #cl-entry-wrap, #cl-entry').remove();  
}

Funktioniert auch, jedoch im IE6 nur bedingt! Wenn die select-Box aufgeklappt wird und ein Eintrag ausgewählt wird, wird das Overlay geschlossen.

Weiß jemand Rat, wie ich das ganze sauber hinbekomme?

LG und Danke schonmal
Steffen