admin管理员组文章数量:1418062
I use a bootstrap modal for my settings dialog in an angularJS app. but it need to open relative to the opener but the default bootstrap behavior is that it opens in the center of the page.I'm looking for a way to open it up and keep it relative to the opener 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>
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;
}
}
});
};
I use a bootstrap modal for my settings dialog in an angularJS app. but it need to open relative to the opener but the default bootstrap behavior is that it opens in the center of the page.I'm looking for a way to open it up and keep it relative to the opener 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>
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;
}
}
});
};
- Post your code or better demo. And looks like your image is not relevant at all. – dfsq Commented Jan 20, 2016 at 15:11
- I edited my post to include the code! – Shmili Breuer Commented Jan 20, 2016 at 15:22
- And the photo shows the modal opened next to the opener. – Shmili Breuer Commented Jan 20, 2016 at 15:28
- Maybe should you used popover instead of modal.... – BENARD Patrick Commented Jan 20, 2016 at 15:41
- Thought about it but it needs to close on click away? – Shmili Breuer Commented Jan 20, 2016 at 15:46
2 Answers
Reset to default 2I was having the same problem today. This is the solution I found and it's working in my project.
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';
});
Basically you get the position of the relative ponent and then set the same value to the top and left properties of the modal.
Hope this helps you!
It will get target attribute of opener or relative element give in bootstrap button.
$(".position-modal").click(function(e) {
var getid = $(this).attr("data-bs-target");
console.log(getid)
var thisleft = $(this).offset().left;
var thistop = $(this).offset().top;
var thiswidth = $(this).width();
var thisheight = $(this).height();
var idwidth = $(getid).width();
var idheight = $(getid).height();
console.log(thisleft)
$(getid + " .modal-content").css({left: thisleft - Number(idwidth/2) + Number(thiswidth/2), top: thistop - Number(idheight/2) + Number(thisheight), opacity:0.2});
});
本文标签： javascriptI need to position a bootstrap modal(dialog) relative to the openerStack Overflow
版权声明：本文标题：javascript - I need to position a bootstrap modal(dialog) relative to the opener - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745258461a2650244.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论