我在 angularJS 应用程序中为我的设置对话框使用 Bootstrap 模式。但它需要相对于开启器打开,但默认的 Bootstrap 行为是它在页面的中心打开。我正在寻找一种方法来打开它并在滚动时保持它相对于开启器。
代码:
模态模板
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">I'm 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;
}
}
});
};
最佳答案
我今天遇到了同样的问题。这是我找到的解决方案,它在我的项目中有效。
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 属性。
希望对你有帮助!
关于javascript - 我需要相对于开启者定位 Bootstrap 模式(对话框),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34903613/