效果如上图
因为项目原因,本打算弄一个可自定义的弹窗,没弄明白。然后转向用div窗口获得,这里的获得是结合前一篇博客中的类似于开发者工具的js代码中的功能。一开始想的很简单,就直接把div在上面,后来想了想,这样要是用户想获得信息在div下面当着怎么办,于是就想到可以让div根据用户的需要进行移动。
于是开始找度娘,结果很失望,说的都不是那么好使,于是就决定自己去研究。
其实也不是很难,只要捕捉鼠标事件就可以了,当鼠标点下的时候,触发js函数,js函数判断此时的鼠标位置和当前的div位置,根据这些位置不断修改div的上偏移量与左偏移量,当鼠标松开后,函数停止调用。
本代码在chrome、Safari、QQ浏览器下能够成功运行;
但是在火狐浏览器(Firefox)下运行失败
接下来就是贴代码了
<script>
var posX;
var posY;
fwuss = document.getElementById("wuss");
fwuss.onmousedown=function(e){
posX = event.x - fwuss.offsetLeft;//获得横坐标x
posY = event.y - fwuss.offsetTop;//获得纵坐标y
document.onmousemove = mousemove;//调用函数,只要一直按着按钮就能一直调用
}
document.onmouseup = function()
{
document.onmousemove = null;//鼠标举起,停止
}
function mousemove(ev)
{
if(ev==null) ev = window.event;//IE
fwuss.style.left = (ev.clientX - posX) + "px";
fwuss.style.top = (ev.clientY - posY) + "px";
}
</script>
PS:注意这里要移动的div要有height与width值
以下是可移动的提示框(当然这里的wuss可以换成div,这里的WUSS是因为直接从项目里面截取下来的原因)
<wuss id="wuss" class="mydiv" style="left:0px;top: 20px;">
<wuss id="wuss0">
<form action="/add_url/" method="post" id="wuss1" >
<input type ="hidden" name="urlid" value="{{ edit_url.id }}">
<table id="wuss2">
<tr>
<th width="100px"></th>
<th width="300px"></th>
</tr>
<tr>
<td><br></td>
<td></td>
</tr>
<tr>
<td><span class="edit_url_span color" id="wuss4">url:</span></td>
<td><input type="text" name="url" onchange="urlchange()" id="urlpart" /><br/></td>
</tr>
<tr>
<td><span class="edit_url_span color" id="wuss5">标题:</span></td>
<td><input type="text" name="title"/><br/></td>
</tr>
<tr>
<td><span class="edit_url_span color" id="wuss6">更新频率:</span></td>
<td><input type="text"size="1" name="update_fq " value="{{ edit_url.update_fq }}"/>天一次<br/></td>
</tr>
<tr>
<td><span class="edit_url_span color" id="wuss7">是否跟踪:</span></td>
<td>
<input type="radio" name="track_status" value="True" checked style="margin: 0px"><span class="color">是</span>
<input type="radio" name="track_status" value="False" checked style="margin: 0px"><span class="color">否</span> <br/>
</td>
</tr>
</table>
<br>
<table id="wuss3">
<tr>
<td width="140px"></td>
<td width="80px"><a href="/../urlmanagement/" class="btn">返回</a> </td>
<td><input type="submit" value="确认添加" class="btn"></td>
</tr>
</table>
</form>
</wuss>
</wuss>
<style>
.mydiv{
position: fixed;
width: 434px;
height: 206px;
z-index: 1000;
background: rgba(0, 0, 0, 0.73);
}
.color{
color: white;
right: 0px;
}
</style>
原文在我的另一个博客:www.arnoldhby.pro