<!DOCTYPE html><html><head><meta charset="UTF-8"><style>#pop {position: absolute;border: solid 1px #
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <style> #pop { position: absolute; border: solid 1px #000; min-height: 200px } </style> </head> <body> <input type="text" style="width:300px" onclick="showPop(this)" onblur="hiddenPop()"/> <script> //得到input的位置，用于确定要弹出来的div的位置 function getPos(ipt) { var p = { x: 0, y: 0 }; //ipt.offsetLeft;input的左内间距 p.x += ipt.offsetLeft; //ipt.offsetLeft;input的上内间距 p.y += ipt.offsetTop; return p } function hiddenPop(){ //获取pop,pop是弹出的div,用于判断是否创建div var pop = document.getElementById('pop'); console.log(pop); if (pop != null) { pop.style.display='none'; } } function showPop(ipt) { //获取pop,pop是弹出的div,用于判断是否创建div var pop = document.getElementById('pop'); //如果pop不存在,说明是第一次点击，则创建div if (pop == null) { //获取p，p是位置点 var p = getPos(ipt); //创建div pop = document.createElement('div'); //设置div的id pop.id = 'pop'; //设置div的样式： //left:' + p.x + 'px设置div的左内间距； //(p.y + ipt.offsetHeight) + 'px 设置div的上内间距，上内间距=input的上内间距+input的高； //(ipt.offsetWidth - 2) + 'px'设置div的宽度 pop.style.cssText = 'left:' + p.x + 'px;top:' + (p.y + ipt.offsetHeight) + 'px;width:' + (ipt.offsetWidth - 2) + 'px'; //把div插入到当前文档体中 document.body.appendChild(pop); //pop中加一个关闭按钮完全是为了方便测试，没什么实际作用 pop.innerHTML = '<input type="button" onclick="closePop(this)" value="关闭"/>' } //如果存在，说明不是第一次点击，直接修改显示属性 else { pop.style.display = 'block' } } function closePop(closeBtn){ closeBtn.parentNode.style.display='none'; } </script> </body></html>
