<html>
<head>
<script>
var fl = false;
function set( id, evt )
{
if( fl ) return;
fl = true;
var div = document.createElement( "div" );
div.id = "menu" + id;
var text = document.createTextNode( "текст:" );
var select = document.createElement( "select" );
var option1 = document.createElement( "option" );
var option2 = document.createElement( "option" );
var option_text1 = document.createTextNode( "опция1" );
var option_text2 = document.createTextNode( "опция2" );
option1.appendChild( option_text1 );
option2.appendChild( option_text2 );
select.appendChild( option1 );
select.appendChild( option2 );
div.appendChild( text );
div.appendChild( select );
div.style.width = "100px";
div.style.height = "100px";
div.style.backgroundColor = "rgb( 100, 255, 100 )";
div.style.left = "" + (evt.clientX - 5) + "px";
div.style.top = "" + (evt.clientY - 5) + "px";
div.style.position = "absolute";
div.style.zindex = "100"
div.setAttribute( "onMouseOut", "javascript: free(" + id + " )" );
// document.getElementById( "top" + id ).appendChild( div );
document.body.appendChild( div );
}
function free( id )
{
// document.getElementById( "top"+id).removeChild( document.getElementById( "menu" + id ) );
document.body.removeChild( document.getElementById( "menu" + id ) );
fl = false;
}
</script>
</head>
<body>
<div id="top1" onMouseOver="set( 1, event )"
style="background-color: yellow; width:100px; position:relative; zindex:50">menu<br>
</div><br>
<div id="top2" onMouseOver="set( 2, event )"
style="background-color: yellow; width:100px; position:relative; zindex:50">menu2<br>
</div>
<p id="text"></p>
</body>
</html>
Это закрывает попап слой раньше времени. Не могу по нему толком мышкой повозить.
Что нужно добавить?
Заранее спасибо.