Using a bootstrap modal for the settings dialog in an angularJS app, but facing an issue where it opens in the center of the page by default instead of relative to the opener. Looking for a solution to keep it positioned correctly when scrolling.
Code:
Modal template:
<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>
JavaScript (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;
}
}
});
};