将一个div通过JavaScript

弹出正下方的输入框中我有这个输入框：将一个div通过JavaScript

<input type='text' size='2' name='action_qty' onmouseup='showHideChangePopUp()'>

和DIV弹出：

<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>

JavaScript函数如下：

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; 
    }

在输入框内点击，我需要将这个div弹出框放在输入框下方。上面的函数将div放在输入框内的任何地方，而不是输入框的底部，这正是我想要的。我如何改变JS功能来完成所需的任务。

来源

2014-12-19 clint

JavaScript或jQuery的？ – Anri

你现在可以发布你的JavaScript吗？ showHideChangePopUp（）方法 – Harko

我的问题实际上是把它放在输入框即下。动态地，我们应该找到特定输入框的位置并将div放在它的下面。大多数答案都给出了隐藏和显示div的答案，这不是问题。 – clint

使用jQuery

fucntion showHideChangePopUp(){ 
    $(this).after($("#div_change_qty").html()); 
}

来源

2014-12-19 12:36:22 Anri

Likt呢？

function showHideChangePopUp(){ 
 
    document.getElementById('div_change_qty').style.display='block'?'block':'none'; 
 
    
 
    }

#div_change_qty{display:none;}

<input type='text' size='2' name='action_qty' onmouseup='showHideChangePopUp()'> 
 

 
<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>

来源

2014-12-19 12:36:29 Billy

，这样的股利出现onfocus和消失onblur我对比利的答案改善。提供了两个版本：纯Js和jQuery。

function showHideChangePopUp(m) { 
 
    var disp = m === 'hide' ? 'none' : 'block'; 
 
    document.getElementById('div_change_qty').style.display = disp; 
 
} 
 
function showHideChangePopUpjQ(m) { 
 
    var disp = m === 'hide' ? 'none' : 'block'; 
 
    $('#div_change_qty').css("display", disp); 
 
}

#div_change_qty{display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<p>With pure JS</p> 
 
<input type='text' size='2' name='action_qty' onfocus='showHideChangePopUp("show")' onblur='showHideChangePopUp("hide")'> 
 
<p>With jQuery</p> 
 
<input type='text' size='2' name='action_qty' onfocus='showHideChangePopUpjQ("show")' onblur='showHideChangePopUp("hide")'> 
 

 
<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>

来源

2014-12-19 12:54:43 Marventus

我们都误解了你原来的岗位作为如何显示或隐藏的股利。

下面的代码把DIV正下方的输入框中，通过输入元素的getClientRects：

function showHideChangePopUp(e){ 
 
    var div= document.querySelector('#div_change_qty'); 
 
    var inp= document.querySelector('#action_qty'); 
 
    var rect= inp.getClientRects(); 
 
    div.style.display= 'block'; 
 
    div.style.left= rect[0].left+'px'; 
 
    div.style.top= rect[0].bottom+'px'; 
 
}

<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> 
 

 
<input type='text' size='2' name='action_qty' id="action_qty" onmouseup='showHideChangePopUp()'>

原贴

它通常是最好的避免在HTML中使用JavaScript。

以下内容将onmouseup处理程序附加到输入，该输入切换div的显示。

它还附加了一个onblur处理程序，以便div离开输入框后消失。

var qty= document.querySelector('#qty'); 
 

 
qty.onmouseup= function(e) { 
 
    var div= document.querySelector('#div_change_qty'); 
 
    div.style.display= div.style.display==='block'?'none':'block'; 
 
} 
 

 
qty.onblur= function(e) { 
 
    var div= document.querySelector('#div_change_qty'); 
 
    div.style.display= 'none'; 
 
}

#div_change_qty{display:none;}

<input type='text' size='2' name='action_qty' id="qty"> 
 

 
<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> 
 

 
<input>

来源

2014-12-19 13:01:59

将一个div通过JavaScript

回答

相关问题