有沒有辦法阻止填充屏幕的離子模態？

我正在使用離子模式顯示登錄表單。當屏幕很大時，這看起來很棒，它在屏幕中精美地居中。但是當屏幕收縮到某一點時（例如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>

來源

2015-10-05 Bill Noble

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

你甚至不必須反覆折騰的背景或你的模態的中心！

來源

2016-07-04 19:37:29 Julien

這是否仍然有效？我將這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%;">

剩下的是模態後面的背景是不是灰色的唯一問題。

來源

2015-10-05 15:54:38

我知道這是老了，但我解決了這個背景問題是這樣的：

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

方式默認模式工作，是使模態去全屏如果窗口大小小於680像素。如果窗口小於680px，則不再需要背景，因此通過將其不透明度更改爲0並將其背景顏色設置爲無效而隱藏。

如果窗口大小小於680px，添加此類可防止背景消失。有人說，這意味着背景實際上總是可見的模式後面（應該不是一個問題，只要確保z-index是正確的）

此外，我會raccomend添加樣式一類而不是內嵌

來源

2016-04-07 11:49:41 Nick

加1用於解決新問題 –

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

但是你可以去ionic.css發生相應的變化，發現其具有的爲680像素最小寬度的條件媒體查詢，只會有一個，只需將其更改爲0px，並且可以隨意使用模態維度，但不會滿足要求。

來源

2017-03-17 11:02:15

有沒有辦法阻止填充屏幕的離子模態？

回答

相關問題