Question

我正在尝试创建链接列表，当鼠标位于不同的链接上时，会出现一个对话框，显示该链接的简短摘要内容。不同链接的内容应该不同。然后，当鼠标离开链接时，该框会自动消失。这是我使用jQuery UI的当前代码：

<script type='text/javascript'>
$(document).ready(function(){
     function hovIn(){
        $("#info1").dialog({
            open : function ( event, ui ) {
            $(".ui-dialog-titlebar-close").hide();
        },
        dialogClass: "no-close",
        position: { my: 'center center', at: 'center top+300', within: window },
        autoOpen: true,
        modal : false,
        });
    }
    function hovOut() {
        $("#info1").dialog('close');          
    }

    $("#id1").hover(hovIn, hovOut);
    $("#id2").hover(hovIn, hovOut);
});

</script>
<body>
<a href=next.htm id='id1'>Link1</a><br><br><br>
<a href=back.htm id='id2'>Link2</a>
<div id='info1' title='Hello' style='display:none'>
<p id='info1_link'>How are you?</p></div>
<div id='info2' title='Goodbye' style='display:none'>
<p id='info2_link'>See you next time</p></div>
</body>

当鼠标悬停在2个链接中的每个链接上时，会显示相同的消息。任何简单的方法都可以节省为不同链接创建多对hovIn和hovOut函数的需求？或者，有没有办法将标题或文本内容传递到hovIn和hovOut函数？（一个问题是，当我使用modal : true时，对话框会一直闪烁。如何修复？）

Answer 1

我会尝试在显示相同内容的对话框上回答您的问题。您应该能够检查触发下面悬停事件的源的目标ID（标记），并相应地创建对话框。

通过在函数hovIn和hovOut的顶部插入下面的行，可以使用适当的div标签创建对话框。

var targetDiv;
if (event.target.id == "id1") {
    targetDiv = "#info1";
} else if (event.target.id == "id2") {
    targetDiv = "#info2";
}
$(targetDiv).dialog({
....

在不同链接上悬停时创建具有不同内容的对话框

1 个答案: