Javascript 在不同链接上悬停时创建包含不同内容的对话框_Javascript_Jquery_Html_Jquery Ui_Dialog

Javascript 在不同链接上悬停时创建包含不同内容的对话框

javascript jquery html jquery-ui

Javascript 在不同链接上悬停时创建包含不同内容的对话框,javascript,jquery,html,jquery-ui,dialog,Javascript,Jquery,Html,Jquery Ui,Dialog,我正在尝试创建链接列表，当鼠标悬停在不同的链接上时，会出现一个对话框，显示该链接的简短摘要内容。内容应为不同的链接不同。然后，当鼠标离开链接时，框自动消失。以下是我当前使用jQuery UI的代码： <script type='text/javascript'> $(document).ready(function(){ function hovIn(){ $("#info1").dialog({ open : function (

我正在尝试创建链接列表，当鼠标悬停在不同的链接上时，会出现一个对话框，显示该链接的简短摘要内容。内容应为不同的链接不同。然后，当鼠标离开链接时，框自动消失。以下是我当前使用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>


$（文档）.ready（函数（）{
函数hovIn（）{
$（“#信息1”）。对话框({
打开：功能（事件、用户界面）{
$（“.ui对话框标题栏关闭”）.hide（）；
},
dialogClass：“禁止关闭”，
位置：{my:'center center'，在：'center top+300'，在：window}内，
自动打开：对，
莫代尔：错，
});
}
函数hovOut（）{
$（“#info1”）.dialog（'close'）；
}
$（“#id1”）。悬停（hovIn，hovOut）；
$（“#id2”）。悬停（hovIn，hovOut）；
});




你好吗
下次见

当鼠标悬停在两个链接上时，会显示相同的消息。有没有简单的方法可以省去为不同链接创建多对

hovIn

和

hovOut

函数的麻烦？或者，是否有方法将标题或文本内容传递到

hovIn

和

hovOut

函数中？

（一个附带的问题是，当我使用

模式：true

时，对话框一直闪烁。如何解决此问题？

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

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

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