Angularjs ui बूटस्ट्रैप: ऊर्ध्वाधर केंद्र मोडल घटक कैसे करें?

हाल ही में मैं angularjs सीख रहा हूँ। मैंने पहले बूटस्ट्रैप का उपयोग किया है। Jquery के साथ, मैं इसे लंबवत संरेखण करने के लिए मोडल घटक स्थिति की स्थिति को आसानी से बदल सकता हूं। अब कोणीय के साथ, ऐसा करना बहुत आसान नहीं लगता है। यहां ui बूटस्ट्रैप मोडल का एक प्लंकर लिंक है, क्या कोई इसे लंबवत संरेखित करने के बारे में जानता है?Angularjs ui बूटस्ट्रैप: ऊर्ध्वाधर केंद्र मोडल घटक कैसे करें?

ui bootstrap modal component

1.index.html

<!doctype html> 
    <html ng-app="ui.bootstrap.demo"> 
    <head> 
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script> 
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script> 
     <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.1.js"></script> 
     <script src="example.js"></script> 
     <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
    </head> 
    <body> 
     <div ng-controller="ModalDemoCtrl"> 
      <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"> 
        This is modal body 
       </div> 
       <div class="modal-footer"> 
        <button class="btn btn-primary" type="button" ng-click="ok()">OK</button> 
        <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button> 
       </div> 
      </script> 
      <button type="button" class="btn btn-default" ng-click="open()">Open me!</button> 
     </div> 
    </body> 
</html>

2.example.js

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']); 
    angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function($scope, $uibModal, $log) { 

     $scope.items = ['item1', 'item2', 'item3']; 

     $scope.animationsEnabled = true; 

     $scope.open = function(size) { 

      var modalInstance = $uibModal.open({ 
       animation: $scope.animationsEnabled, 
       templateUrl: 'myModalContent.html', 
       controller: 'ModalInstanceCtrl', 
       size: size, 
       resolve: { 
        items: function() { 
         return $scope.items; 
        } 
       } 
      }); 
     }; 
    }); 

    angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function($scope, $uibModalInstance, items) { 
     $scope.ok = function() { 
      $uibModalInstance.close($scope.selected.item); 
     }; 

     $scope.cancel = function() { 
      $uibModalInstance.dismiss('cancel'); 
     }; 
    });

स्रोत

2016-02-29 ahwyX100

अगर मैं आपकी समस्या को सही ढंग से समझ, आप लंबवत केंद्र संरेखण बस का उपयोग करके प्राप्त कर सकते हैं सीएसएस। सीएसएस निम्नलिखित जोड़ें:

.modal { 
    text-align: center; 
    padding: 0!important; 
} 

.modal::before { 
    content: ''; 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
    margin-right: -4px; 
} 

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

मैं एक प्रदर्शन करने के लिए एक Plunker तुम्हारा से अलग सेटअप।

आप निम्न लिंक के सहायक पा सकते हैं

आशा इस मदद करता है। चीयर्स !!

स्रोत

2016-02-29 06:46:03 arifin4web

धन्यवाद, यह मेरी समस्या हल करता है, मैंने नहीं सोचा है कि इसे शुद्ध सीएसएस में हल किया जा सकता है। – ahwyX100

उपरोक्त समाधान सभी मॉडलों पर लागू होंगे। यदि आप चुनिंदा मोडल पर आवेदन करना चाहते हैं तो नीचे दिए गए समाधान का पालन करें।

सीएसएस .class-a.class-b और .class-a .class-b चयनकर्ता का उपयोग करता है और विकल्प windowClass सेट करने की आवश्यकता है।

.center-modal.modal { 
    text-align: center; 
} 

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

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

var modalInstance = $uibModal.open({ 
    templateUrl: 'modules/users/client/views/authentication/login.client.view.html', 
    windowClass: "center-modal" 
});

स्रोत

2018-02-28 08:39:35 Xyroid

Angularjs ui बूटस्ट्रैप: ऊर्ध्वाधर केंद्र मोडल घटक कैसे करें?

उत्तर

संबंधित मुद्दे