<html>
<head>
<style>
popup#test
{
background-color: orange;
border:1dip solid red;
width:100dip;
height:100dip;
cursor:pointer;
border-radius: 12dip;
}
div#anchor
{
border:1px solid blue;
width:50dip;
height:50dip;
cursor:pointer;
}
popup#test > div {
background:red; size:10dip;
}
popup#test > div:hover {
background:blue;
}
</style>
<style #actions>
div#anchor
{
behavior: button;
}
</style>
<script type="text/tiscript">
$(div#anchor) << event mousedown
{
if(!this.state.ownspopup) {
var anchorPoint = $(select#anchor-point).value;
var popupPoint = $(select#popup-point).value;
this.popup( $(popup#test), (popupPoint << 16) | anchorPoint);
}
}
// close popup on mouseup inside it
event ~mouseup $(popup) {
this.state.popup = false;
}
</script>
</head>
<body>
popup point (see num keypad):
<select #popup-point>
<option value=1>1 - left/bottom</option>
<option value=2>2 - middle/bottom</option>
<option value=3>3 - right/bottom</option>
<option value=4>4 - left/middle</option>
<option value=5>5 - middle/middle</option>
<option value=6>6 - right/middle</option>
<option value=7>7 - left/top</option>
<option value=8 selected>8 - middle/top</option>
<option value=9>9 - right/top</option>
</select> is on anchor point:
<select #anchor-point>
<option value=1>1 - left/bottom</option>
<option value=2 selected>2 - middle/bottom</option>
<option value=3>3 - right/bottom</option>
<option value=4>4 - left/middle</option>
<option value=5>5 - middle/middle</option>
<option value=6>6 - right/middle</option>
<option value=7>7 - left/top</option>
<option value=8>8 - middle/top</option>
<option value=9>9 - right/top</option>
</select>
<p>Choose position above and click on the anchor:</p>
<div#anchor>
anchor
</div>
<popup #test>
popup
<div></div>
</popup>
</body>
</html>