Что-то не хочет открываться
<!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 _(selector) {//функия для удобства написания примера, копипастить не нужно:)
return document.querySelectorAll(selector)[0];
}
function Focus_and_Blur(opt){
var elem = opt.elem, focusForElem;
if (elem.addEventListener){
elem.addEventListener('focus' , onFocus,true);
document.addEventListener('focus',onDocumentFocus,true);
} else {
elem.onfocusin = onFocus;
document.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:_('#panel'),
focus:function () {
// $("#toggle a").toggle();
},
blur: function () {
// $("#toggle a").toggle();
$("div#panel").slideUp("slow");
// _('#panel').style.display = 'none';
}
});
_('#open').onclick = function () { $("div#panel").slideDown("slow");
$("#toggle a").toggle();
_('#panel').style.display = 'block';
_('#panel').focus();// ставим фокус на блок
return false;}
_('#close').onclick = function () { $("div#panel").slideUp("slow");
$("#toggle a").toggle();
// _('#panel').style.display = 'none';
// _('#panel').blur();// ставим фокус на блок
return false;}
</script>
</body>
</html>