我需要相对于开启者定位一个bootstrap模态（对话框）

Question

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

代码：

模态模板

<Product
  xmlns="http://schemas.microsoft.com/developer/2004/01/bootstrapper"
  ProductCode="Microsoft.Visual.C++.11.0.x86"
>

HTML

<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>

JS

   <span class="settings" ng-click="open(lg)"></span>

Answer 1

我今天遇到了同样的问题。这是我找到的解决方案，它正在我的项目中工作。

        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';



        });

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

希望这能帮到你！