离子2模态制作宽度的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 中添加以下代码
   的原因。

1. Ensured that all modal height and width should be 100%. As ionic resize modal for large screen devices. That's why I added below code in 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. 现在在离子含量中，我们制作两个div，离子含量的背景应该是透明的（参见 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>

这里是模态的屏幕截图，

Here is a screen shot of the modal,

如果你想要模态内容应该滚动，然后用< ion-scroll class =modal_content替换< div class =modal_content> Missak Boyajian 在 = https://stackoverflow.com/questions/43606619/ionic-2-modal-make-50-of-the-width/43609883?noredirect=1#comment74298647_43609883>评论

对于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; }

所有代码均来自这里。我认为此项目回购会对您有所帮助。

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

这篇关于离子2模态制作宽度的50％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！