中心角模态用户界面

本文介绍了中心角模态用户界面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时送ChatGPT账号..

我正在玩角模态 ui 对话框.我想知道有什么方法可以让它居中?我发现了一个类似的问题:Twitter Bootstrap - 中心模态对话框

但无法使其工作，因为我对 angular 还很陌生.这是 angular ui 组件页面中用于模态对话框的 plunker 的简化版本:

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

<button class="btn btn-default" ng-click="open()">打开我！</button>

js:

angular.module('plunker', ['ui.bootstrap']);var ModalDemoCtrl = 函数($scope，$modal){$scope.open = 函数 () {var modalInstance = $modal.open({templateUrl: 'myModalContent.html',控制器: ModalInstanceCtrl});};};var ModalInstanceCtrl = function ($scope, $modalInstance) {$scope.ok = 函数 () {$modalInstance.close("ok");};$scope.cancel = 函数 () {$modalInstance.dismiss("取消");};};

我的想法是在模态打开时动态获取页面的尺寸并调整其大小并使其居中，但我不知道该怎么做，因为我对 angularjs 还很陌生.任何有关工作示例的帮助将不胜感激.

解决方案

您可以在创建modalInstance时使用windowClass属性为模态窗口指定样式类

>

var modalInstance = $modal.open({templateUrl: 'myModalContent.html',控制器:'ModalInstanceCtrl'，windowClass: '中心模式'});

然后在您的 css 中，您可以指定 .center-modal 之类的定义，

.center-modal {位置:固定；前10名％;左:18.5%；z-索引:1050；宽度:80%；高度:80%；左边距:-10%；}

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

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

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

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.

解决方案

You can specify the style class for the modal window by using windowClass attribute while creating modalInstance

var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      windowClass: '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屋！