Ionic 2 Modal 占宽度的 50% [英] Ionic 2 Modal make 50% of the width

问题描述

我的离子应用程序中有一个页面，单击按钮会打开一个模态页面.目前，我已经将 variable.scss 覆盖到下面的代码中，以使模型覆盖 100% 的页面.

I have a page in my ionic application that on button click opens a Modal Page. Currently, I have override the variable.scss to the code below to make the model cover the 100% of the page.

//for Modals
$modal-inset-height-large: 100%;
$modal-inset-height-small: $modal-inset-height-large;
$modal-inset-width: 100%;

但是，这适用于我的应用程序中的所有模型.我想在其他页面中使用一些模型，这些模型使用 50% 的宽度和大约 80% 的高度.如何自定义控件?

However, this applies for all my models in my application. I want to use some models in other pages that use the 50% of the width and around 80% of the height. How can I customize my controls?

推荐答案

您不能更改特定的模态高度或宽度.现在，我将描述一个用于调整模态框大小的解决方案.

You can not change a particular modal height or width. Now, I will describe an solution which I use to resize my modal.

1. 确保所有模态高度和宽度都应为 100%.作为离子调整大屏幕设备的模式.这就是为什么我在下面添加代码在 app.scss.

modal-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
}

@media not all and (min-height: 600px) and (min-width: 768px) {
  ion-modal ion-backdrop {
    visibility: hidden;
  }
}

@media only screen and (min-height: 0px) and (min-width: 0px) {
  .modal-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

1. 现在在 ion-content 中我们创建了两个 div 并且 ion-content 的背景应该是透明的(参见 main-view css 类).现在，一个 div 用于模态的背景，这将用作背景(参见 overlay css 类).另一个 div 应该用于内容，我们将调整这个 div 的大小(参见 modal-content css 类).例如，我将高度调整为 50%.下面给出了示例html和css代码，

1. Now In ion-content we make two div and the background of ion-content should be transparent (see main-view css class). Now, One div is used for background of the modal, this will use as backdrop (see overlay css class). Another div should be used for the content, we will resize this div (see modal-content css class).In example I resize the height to 50%. Sample html ans css code is given below,

page-about {
  .main-view{
    background: transparent;
  }
  .overlay {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: .5;
    background-color: #333;
  }
  .modal_content {
    position: absolute;
    top: calc(50% - (50%/2));
    left: 0;
    right: 0;
    width: 100%;
    height: 50%;
    padding: 10px;
    z-index: 100;
    margin: 0 auto;
    padding: 10px;
    color: #333;
    background: #e8e8e8;
    background: -moz-linear-gradient(top, #fff 0%, #e8e8e8 100%);
    background: -webkit-linear-gradient(top, #fff 0%, #e8e8e8 100%);
    background: linear-gradient(to bottom, #fff 0%, #e8e8e8 100%);
    border-radius: 5px;
    box-shadow: 0 2px 3px rgba(51, 51, 51, .35);
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    overflow: hidden;
  }
}

<ion-content class="main-view">
  <div class="overlay" (click)="dismiss()"></div>
  <div class="modal_content">
    <h2>Welcome to Ionic!</h2>
    <p>
      This starter project comes with simple tabs-based layout for apps that are going to primarily use a Tabbed UI.
    </p>
    <p>
      Take a look at the <code>src/pages/</code> directory to add or change tabs, update any existing page or create new
      pages.
    </p>
  </div>
</ion-content>

这是模态的屏幕截图，

如果您希望模态内容滚动，请将 <div class="modal_content"> 替换为 <ion-scroll class="modal_content" scrollY="true"> 如 Missak Boyajian 在 评论

If you want modal content should scroll then replace <div class="modal_content"> with <ion-scroll class="modal_content" scrollY="true"> as told by Missak Boyajian in comment

对于 Ionic3，您需要 这个 来自 Alston Sahyun Kim 的评论.

For Ionic3 you need to this comment from Alston Sahyun Kim.

this is an excellent answer, just one thing from ionic3, .main-view{ background: transparent; } should be .content{ background: transparent; }

所有代码均取自这里.我认为 这个项目 repo 会对你有所帮助.

All the code is taken from here. I think this project repo will help you.

这篇关于Ionic 2 Modal 占宽度的 50%的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！