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的模态实例中有一个承诺。解析后，从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

将Angular $ modalInstance定位在特定div之上

1 个答案: