AngularJS - 模态位置 - ＆gt;中央

Question

我想将模态和图片集中在模态中，但是atm我只能用FIX位置来做。如果我做亲戚，我的模态将转到页面底部。我试过margin-left：auto;和保证金权利：auto;但它不起作用。 这是我的网站，你可以看到最终结果：http://electronics.youcanlike.com/#/laptop/A0100004

（点击3张小图片旁边的大图片打开模态）

模态中的相册，photo.html：

<div class="modal-body">

    <!-- slider container -->
    <div class="container slider">

        <!-- enumerate all photos -->
        <img ng-repeat="photo in photos" class="slide" ng-swipe-right="showPrev()" ng-swipe-left="showNext()" ng-show="isActive($index)" ng-src="{{photo.src}}" />

        <!-- prev / next controls -->
        <a class="arrow prev" ng-click="showPrev()"></a>
        <a class="arrow next" ng-click="showNext()"></a>

        <!-- extra navigation controls -->
        <ul class="thumb">
            <li ng-repeat="photo in photos" ng-class="{'active':isActive($index)}">
                <img src="{{photo.src}}" alt="{{photo.desc}}" title="{{photo.desc}}" ng-click="showPhoto($index);" />
            </li>
        </ul>

    </div>

  </div>

这是我的modal.css

.modal-backdrop{
position:fixed;
top:0;right:0;bottom:0;left:0;
z-index:1040;
background-color:#000000;
}

.modal-backdrop.fade{
opacity:0;
}
.modal-backdrop,.modal-backdrop.fade.in{
opacity:0.8;
filter:alpha(opacity=80);
}

.modal{
position:fixed;
top:0px;
left:auto;
right:auto;

x position: relative;
x top: 0px;
x margin-top: 0px;
x margin-left: auto;
x margin-right: auto;

z-index:1050;
width:700px;
background-color:#efefef;
border:1px solid #999;
border:1px solid rgba(0, 0, 0, 0.3);*border:1px solid #999;
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);
-webkit-background-clip:padding-box;
-moz-background-clip:padding-box;
background-clip:padding-box;
outline:none;
}

.modal.fade{
-webkit-transition:opacity .3s linear, top .3s ease-out;
-moz-transition:opacity .3s linear, top .3s ease-out;
-o-transition:opacity .3s linear, top .3s ease-out;
transition:opacity .3s linear, top .3s ease-out;
top:-100%;
}

.modal.fade.in{top:0%;}
.modal-header{padding:9px 15px;border-bottom:1px solid #eee;}
.modal-header .close{margin-top:2px;}
.modal-header h3{margin:0;line-height:30px;}

.modal-body{
max-height:600px;
max-width:700px;
margin-left: auto;
margin-right: auto;
x top: 0px;
padding:15px;
position:relative;
overflow-y:auto;
overflow: hidden;
}

.modal-form{margin-bottom:0;}

.modal-footer{
padding:14px 15px 15px;
margin-bottom:0;
text-align:right;
background-color:#f5f5f5;
border-top:1px solid #ddd;
-webkit-border-radius:0 0 6px 6px;
-moz-border-radius:0 0 6px 6px;
border-radius:0 0 6px 6px;
-webkit-box-shadow:inset 0 1px 0 #ffffff;
-moz-box-shadow:inset 0 1px 0 #ffffff;
box-shadow:inset 0 1px 0 #ffffff;*zoom:1;
}

.modal-footer:before,.modal-footer:after{display:table;content:"";line-height:0;}
.modal-footer:after{clear:both;}
.modal-footer .btn+.btn{margin-left:5px;margin-bottom:0;}
.modal-footer .btn-group .btn+.btn{margin-left:-1px;}
.modal-footer .btn-block+.btn-block{margin-left:0;}

这是模态中的相册

albumPhoto.css

.arrow {
cursor: pointer;
display: block;
height: 32px;
margin-top: -35px;
outline: medium none;
position: absolute;
top: 50%;
width: 32px;
z-index: 5;
}
.arrow.prev {
background-image: url("../media/icon/prev.png");
left: 20px;
opacity: 0.2;
transition: all 0.2s linear 0s;
}
.arrow.next {
background-image: url("../media/icon/next.png");
opacity: 0.2;
right: 20px;
transition: all 0.2s linear 0s;
}
.arrow.prev:hover{
opacity:1;
}
.arrow.next:hover{
opacity:1;
}

.thumb {
bottom: -4px;
display: block;
height: 48px;
left: 0;
margin: 0 auto;
padding: 1em 0 0.8em;
position: absolute;
right: 0;
text-align: center;
width: 100%;
z-index: 5;
}
.thumb li {
border: 5px solid #AAAAAA;
border-radius: 5px;
cursor: pointer;
display: inline-block;
margin: 0 8px;
position: relative;
width: 50px;
}
.thumb li.active {
border: 5px solid #00a1e0;
x background: -webkit-linear-gradient(top, #00a1e0, #1575a5); 
x background: -moz-linear-gradient(top, #00a1e0, #1575a5);  
}
.thumb li:hover {
border: 5px solid #1575a5;
}
.thumb li img {
width: 100%;
}

.slider {
clear: both;

border: 15px solid #FFFFFF;
border-radius: 5px;
height: 500px;
margin: 20px auto;
position: relative;
width: 650px;

-webkit-perspective: 600px;
-moz-perspective: 600px;
-ms-perspective: 600px;
-o-perspective: 600px;
perspective: 600px;

-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.slide { 
x margin-top: 20px;
x margin-bottom: 0px;
x margin-right: auto;
x margin-left: auto;
x position: relative;

position: absolute;
top: 0;
left: 40px;
}
.slide.ng-hide-add {
opacity:1;

-webkit-transition:1.5s linear all;
-moz-transition:1.5s linear all;
-o-transition:1.5s linear all;
transition:1.5s linear all;

-webkit-transform: rotateX(50deg) rotateY(30deg);
-moz-transform: rotateX(50deg) rotateY(30deg);
-ms-transform: rotateX(50deg) rotateY(30deg);
-o-transform: rotateX(50deg) rotateY(30deg);
transform: rotateX(50deg) rotateY(30deg);

-webkit-transform-origin: right top 0;
-moz-transform-origin: right top 0;
-ms-transform-origin: right top 0;
-o-transform-origin: right top 0;
transform-origin: right top 0;
}
.slide.ng-hide-add.ng-hide-add-active {
opacity:0;
}
.slide.ng-hide-remove {
-webkit-transition:1.5s linear all;
-moz-transition:1.5s linear all;
-o-transition:1.5s linear all;
transition:1.5s linear all;

display:block!important;
opacity:0;
}
.slide, .slide.ng-hide-remove.ng-hide-remove-active {
opacity:1;
}

最后是控制器：

webshopApp.controller('laptopDetailCtrl', function ( $scope, $routeParams, $http, $modal, $log) {
var pNumber = {
  'partNumber' : $routeParams.partNumber
};
$http({
    url: 'http://electronics.youcanlike.com/phps/laptop/laptopQuery.php',
    method: "POST",
    data: pNumber,
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})
.success(function (data) {
        $scope.laptop = data;
        $scope.partNumber = $routeParams.partNumber;
        $scope.mainImageUrl = data[0].picture1; //'http:\/\/www.electronics.youcanlike.com\/pics\/laptop\/A0100001_01.jpg';
});

$scope.setImage = function(imageUrl) {
  $scope.mainImageUrl = imageUrl;
}





$scope.user = {
    user: 'name',
    password: null
};

$scope.open = function () {

    $modal.open({
        templateUrl: 'myModalContent.html',
        backdrop: true,
        windowClass: 'modal',
        controller: function ($scope, $modalInstance, $log, user) {

            // Set of Photos
            $scope.photos = [
                {src: 'foto/a.jpg', desc: 'Image 01'},
                {src: 'foto/b.jpg', desc: 'Image 02'},
                {src: 'foto/c.jpg', desc: 'Image 03'}
            ];

            // initial image index
            $scope._Index = 0;

            // if a current image is the same as requested image
            $scope.isActive = function (index) {
                return $scope._Index === index;
            };

            // show prev image
            $scope.showPrev = function () {
                $scope._Index = ($scope._Index > 0) ? --$scope._Index : $scope.photos.length - 1;
            };

            // show next image
            $scope.showNext = function () {
                $scope._Index = ($scope._Index < $scope.photos.length - 1) ? ++$scope._Index : 0;
            };

            // show a certain image
            $scope.showPhoto = function (index) {
                $scope._Index = index;
            };

            $scope.cancel = function () {
                $modalInstance.dismiss('cancel');
            };
        },
        resolve: {
            user: function () {
                return $scope.user;
            }
        }
    });
};

});