केंद्र कोणीय मोडल ui

Question

मैं कोणीय मोडल ui संवाद के साथ खेल रहा हूँ। मुझे आश्चर्य है कि इसे केन्द्रित करने का तरीका क्या है? मुझे एक समान प्रश्न मिल रहा है: Twitter Bootstrap - Center Modal Dialog

लेकिन यह काम करने में असमर्थ था क्योंकि मैं कोणीय के लिए नया हूं।

http://plnkr.co/edit/M35rpChHYThHLk17g9zU?p=preview

<script type="text/ng-template" id="myModalContent.html"> 
     <div class="modal-header"> 
      <h3>I'm a modal!</h3> 
     </div> 
     <div class="modal-body"> 
      test 
     </div> 
     <div class="modal-footer"> 
      <button class="btn btn-primary" ng-click="ok()">OK</button> 
      <button class="btn btn-warning" ng-click="cancel()">Cancel</button> 
     </div> 
    </script> 

    <button class="btn btn-default" ng-click="open()">Open me!</button> 

js:

angular.module('plunker', ['ui.bootstrap']); 
var ModalDemoCtrl = function ($scope, $modal) { 

    $scope.open = function() { 

    var modalInstance = $modal.open({ 
     templateUrl: 'myModalContent.html', 
     controller: ModalInstanceCtrl 
    }); 

    }; 
}; 


var ModalInstanceCtrl = function ($scope, $modalInstance) { 

    $scope.ok = function() { 
    $modalInstance.close("ok"); 
    }; 

    $scope.cancel = function() { 
    $modalInstance.dismiss("cancel"); 
    }; 
}; 

मेरा विचार गतिशील पेज के आयामों लेने के लिए है यहाँ कोणीय UI घटक पेज से मॉडल संवाद के लिए plunker का एक सरलीकृत संस्करण है जब मोडल खुला होता है और आकार बदलता है और इसे केन्द्रित करता है, लेकिन मुझे यकीन नहीं है कि मैं ऐसा कैसे कर सकता हूं क्योंकि मैं कोणीय के लिए नया हूं। काम करने वाले उदाहरण के साथ किसी भी मदद की सराहना की जाएगी।

Answer 1

आप, जबकि modalInstance

var modalInstance = $modal.open({ 
     templateUrl: 'myModalContent.html', 
     controller: 'ModalInstanceCtrl', 
     windowClass: 'center-modal' 
    }); 

बनाने फिर अपने सीएसएस में आप .center मोडल की तरह के लिए परिभाषा निर्दिष्ट कर सकते हैं windowClass विशेषता का उपयोग करके मोडल विंडो के लिए शैली वर्ग निर्दिष्ट कर सकते हैं

.center-modal { 
    position: fixed; 
    top: 10%; 
    left: 18.5%; 
    z-index: 1050; 
    width: 80%; 
    height: 80%; 
    margin-left: -10%; 
} 

या अपनी आवश्यकताओं के आधार पर कुछ भी निर्दिष्ट करें

Answer 2

This approach किसी भी मॉडल आकार के साथ काम करता है।

.modal { 
    text-align: center; 
} 

@media screen and (min-width: 768px) { 
    .modal:before { 
    display: inline-block; 
    vertical-align: middle; 
    content: " "; 
    height: 100%; 
    } 
} 

.modal-dialog { 
    display: inline-block; 
    text-align: left; 
    vertical-align: middle; 
} 

मूल उत्तर में प्लंकर के साथ एक उदाहरण है।