javascript - 将 Angular $modalInstance 置于特定的 div 之上

Question

我正在使用 $modalInstance。我希望模式显示在特定的 div 上。我知道我可以使用 window-class，但除此之外，我不确定如何将模式的位置设置在某个 div 之上。

有什么想法吗？

编辑

this.showRetiredModal = function () {
        /*var modalInstance = */$modal.open({
            template: $templateCache.get('states/retire/retiremodal.html'),
            controller: 'RetireModalController',
            size: 1000,
            backdrop: 'static',
            keyboard: false,
            resolve: {
                birthDate: function () {
                    return _this.participantInfo.birthDate;
                },
                homeController: function () {
                    return _this;
                }
            }
        }).rendered.then(function () {
            // Grab target element
            var element = document.querySelector('.accordionIconWidth');
            // Get target position and size
            var rect = element.getBoundingClientRect();
            // Grab modal element
            var modal = document.querySelector('.modal-dialog');

            // Set style 
            modal.style.margin = 0;
            modal.style.width = rect.width + 'px';
            modal.style.top = rect.top + 'px';
            modal.style.left = rect.left + 'px';
        });

    };

Answer 1

如果您想在打开对话框时动态执行此操作，则需要等待模态附加到 DOM。模态实例中有一个名为 rendered 的 promise 。解析后，从 DOM 中获取目标和模态元素，计算目标位置并将其应用于模态元素:

// Initialize
var modalInstance = $uibModal.open({
    templateUrl: 'modal.html',
    controller: 'modal'
// Wait for render
}).rendered.then(function() {
    // Grab target element
    var element = document.querySelector('.well'),
        // Get target position and size
        rect = element.getBoundingClientRect(),
        // Grab modal element
        modal = document.querySelector('.modal-dialog');

    // Set style 
    modal.style.margin = 0;
    modal.style.width = rect.width + 'px';
    modal.style.top = rect.top + 'px';
    modal.style.left = rect.left + 'px';
});            

这是一个关于 Plunker 的工作示例:http://plnkr.co/edit/4vSTKm?p=preview