Here is the input box code:
<input type='text' size='2' name='action_qty' onmouseup='showHideChangePopUp()'>
Along with the pop-up div code:
<div id='div_change_qty' name='div_change_qty' style='display:none;width:200px;height:200px;position:absolute;z-index:10;background:darkgray' >
<table width='100%' height='100%'>
<tr><td width='20%'></td><td>Increase</td></tr>
<tr><td width='20%'></td><td>Decrease</td></tr>
<tr><td width='20%'></td><td>Move Items</td></tr>
<tr><td width='20%'></td><td>Change Status</td></tr>
</table>
</div>
The JavaScript function defined as:
function showHideChangePopUp(e){
//alert('here')
if ( event.clientX ) { // Grab the x-y pos.s if browser is IE.
CurrentLeft = event.clientX + document.body.scrollLeft;
CurrentTop = event.clientY + document.body.scrollTop;
}
else { // Grab the x-y pos.s if browser isn't IE.
CurrentLeft = e.pageX ;
CurrentTop = e.pageY ;
}
//if ( CurrentLeft < 0 ) { CurrentLeft = 0; };
//if ( CurrentTop < 0 ) { CurrentTop = 0; };
document.getElementById('div_change_qty').style.display = 'block';
document.getElementById('div_change_qty').style.top = CurrentTop ;
document.getElementById('div_change_qty').style.left = CurrentLeft ;
return true;
}
When clicking inside the input box, the goal is to position the div popup directly below it. However, the current function doesn't achieve this specific positioning. How can the JavaScript function be modified to place the div below the input box upon click?