AngularJS中bootstrap模态窗口的位置

My modal window from boostrap with AngularJS always opens at the bottom of the window, not as an overlay.

我的带有AngularJS的boostrap的模态窗口总是在窗口的底部打开,而不是作为叠加。

Mark Up:

<div class ="ngView-Container" ng-view ng-controller="galleryController" >

    <div ng-controller="galleryController">
        <script type ="text/ng-template" id="overlay.html">

            <div class="modal-header">
                <h3 class="modal-title">Modal </h3>
            </div>
            <div class="modal-body">
                    <div id="overlay">
                        <img ng-src={{photo}}>          
                    </div>

            <button class="btn btn-default" ng-click="ok()">
                CLOSE
            </button>
    </div>


        </script>

</div>

I am using bootstrap UI for modal dialog

我正在使用bootstrap UI进行模态对话

var myAppController = angular.module('myAppController',['ui.bootstrap']);

In my controller:

在我的控制器中:

  $scope.open = function(arg){

            var modelInstance = $modal.open({
                templateUrl: "overlay.html",
                scope: $scope,
                controller: "ModalInstanceCtrl",
                resolve : {
                        photo : function(){
                            return arg;
                        }
                },


            });


 myAppController.controller("ModalInstanceCtrl",function($scope, $modalInstance, photo){
            $scope.photo = photo;
            $scope.ok = function(){
                $modalInstance.close();
            }
        })

Additional question: If I apply position=fixed, top=0, left=0 to <div class="overlay> which is inside <div class= "modal-body">, the overlay appears with top margin for some reason.

附加问题:如果我将position = fixed,top = 0,left = 0应用于

,它位于

内,由于某种原因,叠加层会显示为上边距。

1 个解决方案

#1

I would use https://angular-ui.github.io/bootstrap/#/modal Its a pretty good plugin for all bootstrap/angular-sites imo

我会使用https://angular-ui.github.io/bootstrap/#/modal它是一个非常好的插件,适用于所有bootstrap / angular-sites imo

But if you wanna use your own, you should check that you dont have an conflicting CSS-styles and that the modal is not wrapped in some container(div or something) that forces a different position on it.

但是如果你想使用你自己的,你应该检查你没有相互矛盾的CSS样式,并且模态没有包装在某个容器(div或其他东西)上,这会强制在它上面有不同的位置。