Jquery 单击显示相对于单击元素的弹出窗口

我试图找出如何显示相对于单击以触发它的链接定位的隐藏元素

我知道如何使用ng click和ng show，但我似乎不知道如何相对于“clicked”元素定位“Showed”元素

想法

---

-Yellowradio

根据您要弹出的内容的复杂性，您可以使用许多不同的方法来执行此操作。您可以轻松创建一个指令来处理所有事情，包括连接元素上的click事件，生成弹出内容的html，然后将其显示在正确的位置。整个示例的代码有点长，请在此处发布，但以下是指令：

angular.module("myModule", []).directive("popupLauncher", function($rootScope, $compile) {
return {
    restrict: 'A',
    link: function(scope, element, attrs) {
        var popup = "<div class='popup'>" + attrs['popupLauncher'] + "</div>";
        element.click(function() {
            var popups = $(".popup");
            if (popups.length > 0) {
                 //if it exists remove it (this allows for only one popup at a time on the screen)  
                popups.remove();
            } else {
                //if it doesn't add it
                var compiledElement = $compile(popup)($rootScope.$new());
                $('body').append(compiledElement);
                //figure out the coordinates of where you want the popup
                var topOfTrigger = element.offset().top;
                var leftOfTrigger = element.offset().left;
                var rightOfTrigger = leftOfTrigger + parseInt(element.css("width")); //don't use width() as it doesn't include margins and padding
                var bottomOfTrigger = topOfTrigger + parseInt(element.css("height"))
                //this will position it at the bottom right of the clicked element but
                //using the variables above you can change that
                $(compiledElement).css("top", bottomOfTrigger)
                    .css("left", rightOfTrigger);

                //you may want to hook up a resize listener on the body to reposition if the 
                //popup is visible when the page resizes
                //also, you may want  a click event on the body to close it when you click off
                //right now this requires that you click on the trigger again

            }
        });
    }
}
});

下面是如何使用它：

<button popup-launcher="this is the popup content">popup</button>

弹出窗口

请参阅此提琴，了解用于设置弹出窗口样式的工作指令和示例CSS：

---

这利用了JQuery，但您可以自己轻松地进行DOM操作/定位。

请注意：如果弹出窗口的内容本身包含角度代码，则只需$compile service。例如，指令或ng click

<button popup-launcher="this is the popup content">popup</button>