js css 动态悬浮窗 怎么做？

Question

给楼主推荐一个 Dialoghttp://www.planeart.cn/demo/artDialog/_doc/new.html你要的效果就是 mouseover 时 触发ajax，然后 Dialog显示出来

Answer 1

http://www.bacysoft.cn/thread-76-1-1.html这里有一个悬浮的案例，但是你说的动态，我没理解是什么意思！？

Answer 2

其实很简单，就是单元格添加mouseover事件，发送ajax请求，请求成功以后1.获取到这个单元格的offsetX与offsetY
2.再算出这个单元格的width跟height
3.再创建一个div，设置position:absolute，并添加到body里面去
4.然后把要显示的内容放进去（因为要是放在左边或者上面的话还要计算这个DIV填充内容后的尺寸，所以先放内容）
5.定位这个div，如果要显示在单元格右边就设置这个div的top=offsetY,left=offsetX+width。其他方向自己算一下就可以了用jquery代码简单的写一下就是这样的：          $('td').hover(function(e){
            var tar = e.target || e.srcElement;
            ajax({
                url:'',
                ...
                success:function(data){
                    var popudiv;
                    if($('#popu_div').size()==0){
                        popudiv = $('<div id="popudiv"></div>').appendTo('body');//不存在则创建了放到body中
                    }else{
                        popudiv = $('#popu_div');
                    }//创建popudiv，如果已存在则不创建
                    popudiv.html(data);//设置内容
                    popudiv.css('position','absolute');//设置position
                    var taroff = tar.offset(),width = tar.width(),height=tar.height;
                    var pos = {//定位popudiv，这里以在td右边显示为例子，左边跟上边的时候还要计算popudiv的尺寸
                        top : taroff.top,
                        left : taroff.left + width
                    }
                    popudiv.css(pos).show();//设置left，top，并显示出来
                }
            })
          },function(){
            $('#popu_div').hide();//鼠标离开TD，popudiv隐藏
          });

Answer 3

 $('td').hover(function(e){
            var tar = e.target || e.srcElement;
            ajax({
                url:'',
                ...
                success:function(data){
                    var popudiv;
                    if($('#popu_div').size()==0){
                        popudiv = $('<div id="popudiv"></div>').appendTo('body');//不存在则创建了放到body中
                    }else{
                        popudiv = $('#popu_div');
                    }//创建popudiv，如果已存在则不创建
                    popudiv.html(data);//设置内容
                    popudiv.css('position','absolute');//设置position
                    var taroff = tar.offset(),width = tar.width(),height=tar.height;
                    var pos = {//定位popudiv，这里以在td右边显示为例子，左边跟上边的时候还要计算popudiv的尺寸
                        top : taroff.top,
                        left : taroff.left + width
                    }
                    popudiv.css(pos).show();//设置left，top，并显示出来
                }
            })
          },function(){
            $('#popu_div').hide();//鼠标离开TD，popudiv隐藏
          });