我正在使用 $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';
});
};
最佳答案
如果您想在打开对话框时动态执行此操作,则需要等待模态附加到 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
关于javascript - 将 Angular $modalInstance 置于特定的 div 之上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34048949/