如何匹配单击按钮的位置及其模态对话框

Posted 2023-05-08

【中文标题】如何匹配单击按钮的位置及其模态对话框

【英文标题】：How to match the position of the clicked button and its modal dialog

【发布时间】：2014-03-06 02:51:38

【问题描述】：

我对此真的很陌生，以前从未尝试过创建模式对话框。单击按钮时，我需要显示一个模式对话框。代码：

function onButtonClick(e, data) 
    switch (data.name) 
    case "tree":
        window.location.href = "familytreeprocess.php?tree=" + data.context.id;
        break;

    case "edit":
        jQuery("#divdeps").dialog(
        autoOpen: true,
        modal: true,
        closeOnEscape: true,
        draggable: false,
        resizable: false,
        width: 415,
        height: 175
        );
        break;                              
    

它工作正常。但是，我希望对话框出现在单击的按钮旁边，确切地说是在按钮的左侧。如何找到当前单击按钮的位置并使对话框适应它？

【参考方案1】：

根据 jQuery 的documentation，您可以提供一个包含对话框位置的数组。

【讨论】：

是的，我知道，但我不确定如何首先找到点击按钮的位置。每个图表项目有多个按钮。这实际上是一个图表，每个项目都有“编辑”按钮。

这行得通，它已经足够好了，但如果对话框出现在按钮附近而不是鼠标光标所在的位置会更好。换句话说，我想找到按钮的位置、高度和宽度，然后将对话框放在它旁边。有办法吗？

当然，在你的按钮上使用jQuery的position，比如var positionX = $('#myButton').position().left等等