懸停在不同鏈接上時創建具有不同內容的對話框

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個鏈接中的每個鏈接上時，也會出現相同的消息。 有沒有一種簡單的方法hovOut為不同的鏈接創建多對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 個解決方案

解決方案1
0 2014-03-06 05:08:24

懸停在不同鏈接上時創建具有不同內容的對話框

問題描述

1 個解決方案

解決方案1 0 2014-03-06 05:08:24

解決方案1
0 2014-03-06 05:08:24