php - 带有鼠标悬停超链接信息的弹出窗口

Question

我想在鼠标悬停在超链接上的链接上显示联系信息和联系我们页面，就像 stackoverflow（鼠标悬停在用户名上）和 gmail（单击用户名）一样。下面是最新更新的代码的样子。

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/start/jquery-ui.css" />

<script>
$('#open').mouseenter(function() {
    $('#dialog_content').dialog('open');
});
$('#dialog_content').mouseleave(function() {
    $('#dialog_content').dialog('close');
});
var posX = $('#open').offset().left;
var posY = $('#open').offset().top;
console.log(posX,posY);
$('#dialog_content').dialog({
    autoOpen: false,
    open: function() {
        closedialog = 1;
        $(document).bind('click', overlayclickclose);
    },
    focus: function() {
        closedialog = 0;
    },
    close: function() {
        $(document).unbind('click');
    },
    buttons: {
      /*  
      Ok: function() {
            $(this).dialog('close');
        }
        */
     },
    show: {
            effect: 'fade',
            duration: 800
        },
    hide: {
            effect: 'fade',
            duration: 800
        },

    position: [posX,posY+25],
    resizable: false
});
</script>
<style>
.ui-dialog-titlebar {display:none;}
#other_content {width:200px; height:200px;background-color:grey;}
#dialog_content{display:none;}
</style>
<div id="dialog_content">bla bla bla</div>




<div id="open">CONTACT US</div>

我得到的错误

未捕获的类型错误：无法读取未定义的属性“左侧”

Answer 1

如果您正在寻找代码更简单的弹出工具提示，我正在享受它的定制版本：

http://devseo.co.uk/examples/pure-css-tooltips/#

如果这对你来说太花哨了，那只是在这个更基本的版本之上的一些 css3 转换，这里解释得很好：

http://sixrevisions.com/css/css-only-tooltips/

Answer 2

选中此选项：

jsfiddle.net/3mxGM/4/

它使用 id 的 div 内的信息创建一个 jQuery 模式窗口dialog_content。您可能需要数据库或其他内容中的该 div 内的动态内容。无论如何，这应该适合你想要的。

html:

<div id="dialog_content">
Here you can write the info to show up in the modal window.<br /><br />
If you know what AJAX is, could be a good idea to use it to query your database and get the info from there.</div>
<a href="#" id="open">Open dialog</a>

jQuery：

$(document).ready(function(){
$('#open').mouseenter(function() {
$('#dialog_content').dialog('open');
});
$('#dialog_content').mouseleave(function() {
$('#dialog_content').dialog('close');
});
var posX = $('#open').offset().left;
var posY = $('#open').offset().top;
$('#dialog_content').dialog({
autoOpen: false,
focus: function() {
    closedialog = 0;
},
close: function() {
    $(document).unbind('click');
},
buttons: {
  /*  
  Ok: function() {
        $(this).dialog('close');
    }
    */
 },
show: {
        effect: 'fade',
        duration: 800
    },
hide: {
        effect: 'fade',
        duration: 800
    },
position: [posX,posY+25],
resizable: false
});
});

CSS：

.ui-dialog-titlebar {display:none;}