Popup Div在鼠标悬停时点击/点击

我想要实现类似于Facebook中的内容，当我们将鼠标悬停在链接上时，链接上锚点的箭头浮动div将显示在链接上。

您是如何解决这种组件的？我找到的最近的图书馆是http://gristmill.github.com/jquery-popbox/某些浏览器有时无法使用此功能。进一步搜索“Popbox”不会显示任何有用的结果。任何人都可以推荐像我发布的链接的任何类似的库？它可以使用jquery，Javascript，CSS，html等。

不是使用库，任何人都可以用最简单的方式告诉我如何在不使用库的情况下做到这一点。我只想知道背后的粗略想法。大多数图书馆都有复杂的代码，很难为初学者学习。

非常感谢先进。

来源

2012-11-19 GMsoF

+1想学习:) – fedmich

检查这方面的工作演示：http://jsfiddle.net/fedmich/Aapw6/

你需要创建顶部的箭头的图像，并在弹出的对话框居中，然后一般移动弹出框跟随目标锚。

$('.hover').hover(function(){ 
     var popup_div = $('.popup_div'); 
     var obj = $(this); 
     var offset = obj.offset(); 

     var new_top = offset.top + 30; 

     var new_left = offset.left; 

     new_left = new_left - (popup_div.width()/2); 
     new_left = new_left + (obj.width()/2); 

     popup_div.css('left', new_left + 'px'); 
     popup_div.css('top', new_top + 'px'); 

     popup_div.show(); 
    } 
    , function(){ 
     //hovered away so hide popup 
     $('.popup_div').hide(); 
    } 
    );

CSS代码应该是绝对位置

.popup_div{ 
    position:absolute; 
    left:100px; 
    top:100px; 
    border:1px solid red; 
    background-color:blue; 
    width:150px; 
    height:150px; 
    background:url("http://i.imgur.com/zFWft.png") no-repeat scroll center 0 transparent; 
    text-align:left; 
}

你可以通过获取目标div的定位，然后由半分割宽度并将其添加到获得中心做到这一点左边。

new_left = hovered_thing.left + (hovered_thing.width/2) - (popup_div.width/2)

让我给你一些捣鼓这个不久在另一方面，虽然，你尝试过悬浮卡？你想要做

http://designwithpc.com/Plugins/Hovercard

来源

2012-11-19 09:50:32 fedmich

感谢您的演示。这很容易理解。 – GMsoF

jQuery UI的什么可能是类似于提供dialog功能

，你有你的锚绑定，它显示和隐藏其背后的想法，你弹出

$('#anchor').bind({ 
    'mouseenter' : function() { 
     $('#popUp').show(); 
    }, 
    'mouseleave' : function() { 
     $('#popUp').hide(); 
    } 
});

您将不得不将弹出窗口的位置设置为。注意，只有在弹出的div显示不关你可以使用$（ '＃弹出'）。outerWidth（）/ 2和$（ '＃锚'）。outerWidth（）/ 2 ...

来源

2012-11-19 09:52:21 ChaosClown

Popup Div在鼠标悬停时点击/点击

回答

相关问题