<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title></title>
<script type= "Text/javascript" src= ". /javascript/jquery-1.6.js "></script>
<style type= "Text/css" >
#choice_list_district {height:50px;}
#tab Td{cursor:pointer;}
</style>
<script type= "Text/javascript" >
$ (function () {
Binding Event Handling
$ ("#choice_list_district a"). Click (function (e) {
if ($ ("#divObj"). CSS ("display") = = "None") {
E.stoppropagation ();
Setting the pop-up layer location
var offset = $ (e.target). offset ();
Set the pop-up layer position below the click
$ ("#divObj"). CSS ({top:offset.top + $ (e.target). Height () + "px", left:offset.left});
$ ("#divObj"). Show ();
}
else {
$ ("#divObj"). Hide ();
}
});
Click a blank area to hide the pop-up layer
$ (document). Click (Function (Event) {$ ("#divObj"). Hide ();};
Click the pop-up layer to hide itself
$ ("#divObj"). Click (Function (Event) {$ ("#divObj"). Hide (Speed)});
$ ("#tab tr TD"). Click (Function (event) {
$ ("#aaa"). Val ($ (this). html ());
});
});
</script>
<body>
<form id= "Form1" runat= "Server" >
<div>
<div id= "Choice_list_district" >
<a href= "#" > Out layer </a>
</div><div id= "Divobj" style= "Position:absolute; width:200px; height:200px; Background:blue; BORDER:1PX solid Block; Display:none; z-index:9999; " >
<table id= "tab" >
<tr>
<td>aaa</td>
</tr>
<tr>
<td>bbb</td>
</tr>
</table>
</div>
<div style= "Position:absolute; top:200px; left:200px; " >
<input type= "text" id= "AAA"/>
</div>
</div>
</form>
</body>
