日期:2014-05-18  浏览次数:20685 次

弹出窗口如何实现
需求描述:
在页面上以列表方式显示查询结果, 其中有一列ColumnA,当鼠标停留在ColumnA的任意一行时,在当前位置弹出窗口,显示与当前值相关的信息,显示的信息是通过Ajax请求服务器得到的, 鼠标离开,弹出窗口消失。

请教关于弹出窗口部分如何实现? 最好有现成的代码。

Thanks.

------解决方案--------------------

------解决方案--------------------
http://malsup.com/jquery/block/#demos
------解决方案--------------------
举个例子:
<script language="JavaScript" for="对象" event="事件"> 
... 
(事件处理程序代码) 
... 
</script> 

<script language="JavaScript" for="window" event="onload"> 
alert('网页读取完成,请慢慢欣赏!'); 
</script> 
你可以根据你要显示的内容作修改,这里只是事例
你参考以下




------解决方案--------------------
如果用alert();的方式弹出窗口的话可能不太好。建议用DIV层来做。把DIV样式position设置absolute,为列表上的列添加一个事件处理。
如果那个列表是用table的话,假设为第二列加上这个效果,可以这样实现:
<script type="text/javascript">
var table = document.getElementById("tableId");//假设table的Id为tableId
for (int i = 0; i < table.rows.length; i++) {
var td = table.rows[i].cells(1);//找到第二列
  td.onmouseover = function() {
var floatDiv = document.getElementById("divInfo");//假设要弹出的DIV的Id为divInfo
floatDiv.style.left = event.x;
floatDiv.style.top = event.y;
floatDiv.style.display = "block";
}
  td.onmouseout = function() {
var floatDiv = document.getElementById("divInfo");//假设要弹出的DIV的Id为divInfo
floatDiv.style.display = "none";
}
}
</script>
至于弹出层中的数据,非AJAX莫属了