javascript - 我需要相对于开启者定位 Bootstrap 模式(对话框)

Question

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

代码:

模态模板

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

HTML

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

JS

$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;
            }
        }
    });
};

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



        });

基本上，您获取相关组件的位置，然后将相同的值设置为模态框的 top 和 left 属性。

希望对你有帮助!