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

问题描述：

我正在使用离子模式显示登录表单。当屏幕很大时，这看起来很棒，它在屏幕中精美地居中。但是当屏幕收缩到某一点时（例如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>

答

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

插图y模式变量特别有用我们的场景。

简短的例子从我自己的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>";

你甚至不必须反复折腾的背景或你的模态的中心！

这是否仍然有效？我将这3行添加到了我的'app.scss'文件中，对于小设备，模态仍然是全屏模式。（编辑，找到文件，删除了那部分问题） – Matt

它应该（但是，没有使用Ionic一段时间）。请注意，这对Ionic 1有效！确保离子scss文件包含在您自己的AFTER中，并将变量重载。 – Julien

不行不行。在离子3.如果你看这里https://ionicframework.com/docs/theming/overriding-ionic-variables/模式等等确实出现在列表中，它不起作用。 – JGFMK

答

多尝试我碰到下面的解决方案，这似乎工作不够好跌跌撞撞之后。我改变了离子态视图的造型到：

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

剩下的是模态后面的背景是不是灰色的唯一问题。

答

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

@media (min-width: 0px) { 
    .modal-backdrop-bg { 
    opacity: 0.5 !important; 
    background-color: #000; 
    } 
}

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

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

此外，我会raccomend添加样式一类而不是内嵌

加1用于解决新问题 –

答

首先方法，如果您使用的青菜只会工作，并在SCSS

但是你可以去ionic.css发生相应的变化，发现其具有的为680像素最小宽度的条件媒体查询，只会有一个，只需将其更改为0px，并且可以随意使用模态维度，但不会满足要求。

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

相关推荐