我正在使用 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>
最佳答案
如果您的项目正在使用 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>";
而且您甚至不必摆弄背景或模态的居中!
关于html - 有没有办法阻止 ionic 模态填充屏幕?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32946426/