离子2模态制作宽度的50%

Question

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

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

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

Answer 1

您无法更改特定的模态高度或宽度.现在,我将描述一个我用来调整模态大小的解决方案.

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%;
  }
}

2. 现在在离子含量中我们制作两个div,离子含量的背景应该是透明的(参见main-viewcss类).现在,一个div用于模态的背景,这将用作背景(请参阅overlaycss类).应该使用另一个div作为内容,我们将调整此div的大小(请参阅modal-contentcss类).在示例中,我将高度调整为50%.示例html和css代码如下,

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在评论

对于Ionic3你需要这个从评论阿尔斯通Sahyun金.

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

所有代码都来自这里.我认为这个项目回购会帮助你.