<!DOCTYPE HTML>
<html>
<head>
<style>
#toppanel {
position:fixed;
z-index: 999;
margin:0px;}
#toppanel a {cursor:pointer;}
#toppanel:focus {outline: none;}
#panel {
position: relative;
z-index: 3;
display: none;}
#toppanel .login_tab {
position: relative;
top: 0;
z-index: 999;}
</style>
</head>
<body>
<div id="toppanel" tabindex="-1">
<div id="panel">
<div class="content_panel clearfix_panel">
<input type='text' id='fld1' size='10' name='req_username' value=''>
<input type='password' id='fld2' size='10' name='req_password' value=''>
</div>
</div>
<div class="login_tab">
<span id="toggle">
<a id="open" class="open">Открыть панель</a>
<a id="close" style="display: none;" class="close">Закрыть панель</a>
</span>
</div>
</div>
<script>
function Focus_and_Blur(opt){
var elem = opt.elem, focusForElem;
var body = document.body;
body.setAttribute('tabindex',-1);
if (elem.addEventListener){
elem.addEventListener('focus' , onFocus,true);
body.addEventListener('focus',onDocumentFocus,true);
} else {
elem.onfocusin = onFocus;
body.onfocusin = onDocumentFocus;
}
function onFocus(e) {
focusForElem = true;
event.cancelBubble = true;
opt.focus.call(this,e);
}
function onDocumentFocus (e) {
if (focusForElem) {
focusForElem = false;
opt.blur.call(elem,e)
}
}
};
Focus_and_Blur({
elem:document.getElementById('toppanel'),
focus:function () {
$("div#panel").slideDown("slow");
$("#toggle a").toggle();},
blur: function () {
$("div#panel").slideUp("slow");
$("#toggle a").toggle();},}
});
</script>
</body>
</html>