Angularjs ui bootstrap：縦型センターモーダルコンポーネントはどうですか？

最近、私はangularjsを学んでいます。私は以前にブートストラップを使ってきました。 jqueryを使用すると、モーダルコンポーネントの位置を簡単に変更して、垂直に整列させることができます。角度ジェスでは、それを行うことはあまり簡単ではないようです。ここにuiのブートストラップモーダルのplunkerリンクです、誰もそれを垂直に整列させる方法を知っていますか？Angularjs ui bootstrap：縦型センターモーダルコンポーネントはどうですか？

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

私が正しくあなたの問題を理解していれば、あなただけ使用して垂直方向の中央揃えをacheiveすることができますCSS。次のCSSを追加してください：

.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

これは私の問題を解決し、純粋なCSSで解決できるとは考えていません。 – ahwyX100

上記の解決策は、すべてのモーダルに適用されます。選択的モーダルに適用したい場合は、以下の解決策に従ってください。

CSSは.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 bootstrap：縦型センターモーダルコンポーネントはどうですか？

答えて

関連する問題