AngularJS - मॉडल स्थिति -> केंद्र

I would like to center my modal and the pictures within the modal, but atm I can only do it with a FIX position. If I do relative, my modal will go to the bottom of the page. I tried margin-left:auto; and margin-right:auto; but it doesn't work. Here is my website were you can see the final result: http://electronics.youcanlike.com/#/laptop/A0100004

(मोडल खोलने के लिए 3 छोटी तस्वीर के बगल में बड़ी तस्वीर पर क्लिक करें)

मोडल के भीतर फोटो एलबम, photo.html:

<div class="modal-body">

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

        <!-- enumerate all photos -->
        

        <!-- prev/next controls -->
        
        

        <!-- extra navigation controls -->
        
  • {{photo.desc}}
    </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;
            }
        }
    });
};

});
0
यह पहले ही तय है।
जोड़ा लेखक user2950320, स्रोत
मैं निश्चित रूप से उपयोग नहीं करना चाहता क्योंकि अगर मैं इसे 1080 पी मॉनीटर पर खोलता हूं, और मैंने उदाहरण के लिए 300px उदाहरण दिया है, तो 1024x768 की तरह कम रिज़ॉल्यूशन मॉनिटर पर, मुझे अपने मोडल का आधा दिखाई नहीं देगा, और यह ' बिल्कुल केंद्रित नहीं है।
जोड़ा लेखक user2950320, स्रोत
एटीएम आप देख सकते हैं: .modal {स्थिति: तय; शीर्ष: 0px; बाएं: ऑटो; सही: ऑटो;
जोड़ा लेखक user2950320, स्रोत
आप fixed स्थिति या पूर्ण का उपयोग क्यों नहीं करते?
जोड़ा लेखक Abu Romaïssae, स्रोत
मैन आपने बहुत अधिक कोड पोस्ट किया है जो इसे पढ़ने के लिए मुश्किल है। मैं वही चीज़ ढूंढ रहा हूं। मुझे इस छोटे लड़के को एनजी-मॉड्यूल पर मिला। इसे अभी तक काम नहीं किया है, लेकिन मैंने सोचा कि अगर आप या कोई और कोशिश करना चाहता है तो मैं इसे पोस्ट करूंगा। github.com/iameugenejo/angular-centered
जोड़ा लेखक j_walker_dev, स्रोत

कोई जवाब नहीं है

0