0

我创建了代码以在单击 div 时显示 jquery 对话框。现在对话框在点击位置后的 5 点处弹出。

我正在尝试从 li 的顶行显示对话框，这意味着 li 的顶部边框应该与对话框的顶部边框对齐。有人可以指出我正确的逻辑，以找出如何通过获取 li 顶部边框位置来打开对话框。

  <div class="editionDetailAction">Action for Item 1</div>
<div class="editionDetailAction">Action for Item 2</div>
<div class="editionDetailAction">Action for Item 3</div>
<div class="editionDetailAction">Action for Item 4</div>



<div id="actionsPopup">
    <ul><li><a href="http://www.google.com">Add xyz</a></li></ul>
    <ul><li>Manage xyz</li></ul>
    <ul><li>Show xyz</li></ul>
</div>


.editionDetailAction { width: 130px; height: 30px; border: solid 1px #ddd; }
.actionsPopup .ui-dialog-titlebar { display:none; }



$(document).ready(function () {
    $('.editionDetailAction').click(function (e) {
        $("#actionsPopup").dialog("option", { position: [e.pageX+5, e.pageY+5] });
    });

    $("#actionsPopup").dialog({
            autoOpen: false,  
dialogClass: 'actionsPopup',
        maxWidth:100,
                    maxHeight: 100,
                    width: 100,
        height: 80,
resizable: false,


    });
    $(".editionDetailAction").bind("click", function () {
        $("#actionsPopup").dialog('open'); 
    });
    $(".actionsPopup").bind("mouseover", function () {
        $("#actionsPopup").dialog('open');
    }); $(".actionsPopup").bind("mouseleave", function () {
        $("#actionsPopup").dialog('close');
    });

    $(".editionDetailAction").bind("mouseleave", function () {
        $("#actionsPopup").dialog('close'); 
    });


   });
4

1 回答 1

1

试试这个：

$('.editionDetailAction').click(function() {
    var pos = $(this).position();
    $("#actionsPopup").dialog("option", {
        position: [pos.left+5, pos.top+5]
    });
});

见例子：http: //jsfiddle.net/Twisty/DZm9d/1/

于 2012-12-13T01:45:46.340 回答