中心角模态用户界面 [英] Center Angular modal ui

问题描述

我正在使用角度模态ui对话框.我想知道如何使它居中吗?我发现一个类似的问题: Twitter引导程序-中心模态对话框

I am playing with angular modal ui dialog. I wonder what is the way to center it ? I find a similar question: Twitter Bootstrap - Center Modal Dialog

但是由于我对角度比较陌生，所以无法使其正常工作.这是来自Angular ui组件页面的模式对话框插件的简化版本:

but was unable to make it work as I am rather new to angular. Here is a simplified version of the plunker for modal dialog from the angular ui components page:

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

我的想法是在模式打开时动态调整页面的尺寸并调整其大小并居中，但是我不确定该如何做，因为我对angularjs不太熟悉.任何有关工作示例的帮助将不胜感激.

My idea is to take the dimensions of the page dynamically when the modal is open and resize and center it, but I am not sure how can I do that as I am rather new to angularjs. Any help with working example will be greatly appreciated.

推荐答案

在创建modalInstance

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

然后在CSS中，您可以为.center-modal指定定义，

then in your css you can specify the definition for .center-modal like,

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

或根据您的需要指定任何内容

or specify anything based on your needs

这篇关于中心角模态用户界面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！