Javascript 我需要定位一个引导模式（对话框）相对于开瓶器

我在angularJS应用程序中为我的设置对话框使用引导模式。但是它需要相对于开瓶器打开，但是默认的引导行为是它在页面的中心打开。我正在寻找一种方法来打开它，并在滚动时保持它相对于开瓶器的位置

代码：

模态模板

<script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header">
        <h3 class="modal-title">I&#39m a modal!</h3>
    </div>
    <div class="modal-body">
        <ul>
            <a href="#">hello</a>
        </ul>
        Selected: <b>123</b>
    </div>
    <div class="modal-footer">
        <p>Done</p>
    </div>
</script>

---

我今天也有同样的问题。这是我找到的解决方案，它在我的项目中起作用

        var modalInstance = $uibModal.open({
            animation: true,
            backdrop: true,
            backdropClass: "modal-backdrop-custom",
            template:"<h1>Hello World!</h1>" 
        }).rendered.then(function (modal) {
            var element = document.getElementById("elementIdHere"),
                rect = element.getBoundingClientRect(),
                modal = document.querySelector('.modal-dialog');

            modal.style.margin = 0;
            modal.style.left = rect.left + 'px';
            modal.style.top = rect.top + 'px';



        });

var modalInstance=$uibModal.open({
动画：没错，
背景：没错，
backdropClass:“模式背景自定义”，
模板：“你好，世界！”
}).rendered.then（函数（模态）{
var element=document.getElementById（“elementIdHere”），
rect=element.getBoundingClientRect（），
modal=document.querySelector（'.modal对话框'）；
modal.style.margin=0；
modal.style.left=rect.left+'px'；
modal.style.top=rect.top+'px'；
});

基本上，您可以获得相对组件的位置，然后将相同的值设置为模态的顶部和左侧属性

---

希望这对你有帮助

发布您的代码或更好的演示。看起来你的图片一点也不相关。我编辑了我的帖子，加入了代码！这张照片显示了开启器旁边打开的模式。也许你应该用它来代替模式…考虑过了，但它需要在点击离开后关闭吗？

$scope.open = function (size) {
    console.log($document.find('my_items_wdgt').find('settings'))
    var modalInstance = $uibModal.open({
        animation: true,
        appendTo: $document.find('hello123'),
        templateUrl: 'myModalContent.html',
        size: size,
        backdrop: true,
        windowClass: "myItemsModal",
        resolve: {
            brands: function () {
                return $rootScope.usersBrands;
            }
        }
    });
};

        var modalInstance = $uibModal.open({
            animation: true,
            backdrop: true,
            backdropClass: "modal-backdrop-custom",
            template:"<h1>Hello World!</h1>" 
        }).rendered.then(function (modal) {
            var element = document.getElementById("elementIdHere"),
                rect = element.getBoundingClientRect(),
                modal = document.querySelector('.modal-dialog');

            modal.style.margin = 0;
            modal.style.left = rect.left + 'px';
            modal.style.top = rect.top + 'px';



        });