Angularjs ui bootstrap: dikey merkez modlu bileşen nasıl?

Geçtiğimiz günlerde angularjs öğreniyorum. Daha önce bootstrap kullandım. JQuery ile, dikey hizalama yapmak için modal bileşen konumunun konumunu kolayca değiştirebilirim. Şimdi angularjs ile, bunu yapmak çok kolay değil. İşte bir boot boot modelinin bir plunker bağlantısı, Herkes dikey hizalamayı nasıl yapacağını biliyor mu?Angularjs ui bootstrap: dikey merkez modlu bileşen nasıl?

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'); 
     }; 
    });

kaynak

2016-02-29 ahwyX100

Doğru sorununuzu anlamak, kullanarak dikey hizalamayı sadece modernleşmek edebilirsiniz CSS. CSS aşağıdaki ekleyin:

.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; 
}

ben bir gösteri yapmak için bir Plunker sizinkinden çatallı kurulum var.

Sen Faydalı bu yardımcı olur

Bootstrap 3 modal vertical position center

Codepen Emaple

kaynak

2016-02-29 06:46:03 arifin4web

Teşekkürler, bu benim sorunumu çözüyor, bunun saf css'de çözülebileceğini düşünmemiştim. – ahwyX100

Yukarıdaki çözümler tüm modellere uygulanacaktır. Seçmeli modellere başvurmak istiyorsanız, aşağıda verilen çözümü takip ediniz.

CSS, .class-a.class-b ve .class-a .class-b seçicisini kullanır ve windowClass seçeneğini ayarlamanız gerekir.

.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" 
});

kaynak

2018-02-28 08:39:35 Xyroid

Angularjs ui bootstrap: dikey merkez modlu bileşen nasıl?

cevap

İlgili konular