Question

我正在使用离子模式来显示登录表单。当屏幕很大时，它看起来很棒，它在屏幕中很漂亮。但是当屏幕缩小到某一点（例如iPhone 6尺寸）时，模态会占据整个屏幕（高度和宽度）。有没有办法确保模态保持小于屏幕？

我的HTML看起来像这样：

＆＃13;

<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>

＆＃13;

Answer 1

经过多次实验后，我偶然发现了以下解决方案，该解决方案似乎运行良好。我将离子模态视图的样式更改为：

＆＃13;

<ion-modal-view  style="width: 80%; height: 60%; min-height: 0; max-height: 250px; top: 20%; left: 10%; right: 10%; bottom: 20%;">

＆＃13;

唯一的问题是模态背后的背景并没有变暗。

Answer 2

我知道这是旧的，但我解决了这样的背景问题：

ClassA ca = new ClassA();
ca.send(); //Here
ca.print();

默认情况下模态的工作方式是，如果窗口大小小于680px，则使模态全屏显示。如果窗口小于680像素，则不再需要背景，因此通过将其不透明度更改为0并将其背景颜色设置为空来隐藏背景。

如果窗口大小小于680px，则添加此类可防止背景消失。据说，这意味着背景实际上总是在模态后面可见（根本不应该是一个问题，只要确保z-index是正确的）

另外，我很想将样式添加到类而不是内联属性

Answer 3

如果你的项目正在使用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;

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

我自己的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>";

你甚至不必为背景或模态的中心摆弄！

Answer 4

上述所有方法只有在使用sass时才有效，并在scss中相应更改

然而你可以去ionic.css，找到一个媒体查询，其条件为最小宽度为680px，只有一个，只需将其改为0px，你就可以像你一样玩你的模态尺寸想要，它不会满满的。

Answer 5

您可以通过使用模态控制器使用的第三个参数，使用cssClass选项并应用您选择的css来实现此目的。

可以在ModalController API documentation中的“高级>选项说明”下找到。

有没有办法阻止离子模态填充屏幕？

5 个答案: