html - 有没有办法阻止 ionic 模态填充屏幕？

Question

我正在使用 ionic 模式来显示登录表单。当屏幕很大时，这看起来很棒，它在屏幕中居中。但是当屏幕缩小到某个点(例如 iPhone 6 尺寸)时，模态框会占据整个屏幕(包括高度和宽度)。有没有办法确保模态保持小于屏幕？

我的 html 看起来像这样:

<ion-modal-view  style="max-height:250px;">
  <ion-header-bar>
    <h1 class="title">Login</h1>
    <div class="buttons">
      <button class="button button-clear" ng-click="closeLogin()">Close</button>
    </div>
  </ion-header-bar>
  <ion-content>
    <form ng-submit="doLogin()">
      <div class="list">
        <label class="item item-input">
          <span class="input-label">Username</span>
          <input type="text" ng-model="loginData.username">
        </label>
        <label class="item item-input">
          <span class="input-label">Password</span>
          <input type="password" ng-model="loginData.password">
        </label>
        <label class="item">
          <button class="button button-block button-positive" type="submit">Log in</button>
        </label>
      </div>
    </form>
  </ion-content>
</ion-modal-view>

Answer 1

如果您的项目正在使用 SASS(可能是)，您可以使用变量:

来自 _variables.scss:

$modal-bg-color:                  #fff !default;
$modal-backdrop-bg-active:        #000 !default;
$modal-backdrop-bg-inactive:      rgba(0,0,0,0) !default;

$modal-inset-mode-break-point:    680px !default;  // @media min-width
$modal-inset-mode-top:            20% !default;
$modal-inset-mode-right:          20% !default;
$modal-inset-mode-bottom:         20% !default;
$modal-inset-mode-left:           20% !default;
$modal-inset-mode-min-height:     240px !default;

插入模式变量在您的场景中特别有用。

来 self 自己的 scss 文件的简短示例:

$modal-inset-mode-break-point:    0px;  // modals are ALWAYS windowed
$modal-inset-mode-right:          5%;   // 5% "margin" to the right
$modal-inset-mode-left:           5%;   // 5% "margin" to the left

// Include all of Ionic
@import "<path to main ionic scss file>";

而且您甚至不必摆弄背景或模态的居中!