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

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

确保所有模态高度和宽度均为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%;
  }
}

现在在离子含量中我们制作两个div，离子含量的背景应该是透明的（参见main-view css类）。现在，一个div用于模态的背景，这将用作背景（请参阅overlay css类）。另一个div应该用于内容，我们将调整这个div的大小（参见modal-content css类）。在示例中，我将高度调整为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">替换为Missak Boyajian comment

<ion-scroll class="modal_content" scrollY="true">

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

对于Ionic3，您需要this发表Alston Sahyun Kim条评论。

epoch = (datetime.datetime(2017,05,26,20,0) - datetime.datetime(1970,1,1)).total_seconds()

所有代码均来自here。我认为this project repo会帮助你。

Answer 2

我之前尝试过，但没有找到一种通用的方法让模态按照我的意愿行事。

所以我稍微捣乱了一下，用以下全局scss实现了响应模式和其他类型的模态：

ion-modal {
    &.my-modal-inner {
        display: flex;
        align-items: center;
        justify-content: center;

        ion-backdrop {
            visibility: visible;
        }

        .modal-wrapper {
            display: flex;
            align-items: flex-start;
            justify-content: center;
            overflow: auto;
            width: auto;
            height: auto;
            left: auto;
            top: auto;
            contain: content;

            max-width: 70%;
            max-height: 70%;

            border-radius: 2px;
            box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);

            > .ion-page {
                position: relative;
                display: block;
                width: auto;
                height: auto;
                contain: content;
                box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
            }
        }

        &.my-stretch {
            .modal-wrapper {
                overflow: hidden;
                width: 100%;
                height: 100%;

                > .ion-page {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }

    &.my-fullscreen {
        .modal-wrapper {
            position: absolute;
            display: block;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    }   
}

您可以使用cssClass: 'my-modal-inner'获得具有内部内容大小的响应式模式：

当内容超过限制时，模态将占据宽度和高度的最大70％（如上面css中所定义）

如果模式的内容应该占用所有容器元素（如页面或具有ion-content的组件），则上述情况不会很好，因为modal假设容器应该具有其子容量，导致可能不良行为（模式将非常小，超出应有的范围）：

相反，您可以使用cssClass: 'my-modal-inner my-stretch'定义模式以占据其最大尺寸：

如果您希望模式全屏，即使在大型桌面浏览器中，您也可以使用cssClass: 'my-fullscreen'：

备注：

您可以使用您选择的任何其他前缀（或无前缀）更改前缀 my-。

您可以更改上述css中模式的最大宽度和高度，因为您认为合适（我将其定义为70％，在您的情况下将为50％并且宽度和高度分别为80％）。

以上屏幕截图是在桌面浏览器中拍摄的，但模态更改也适用于Ionic的移动/本机应用程序（我在Android中测试过，它也可以在iOS上运行）。

更新（2018-07-30）

关于模式的HTML代码：

1）响应式模式，与内部内容（单个div或divs，spans的层次结构一样大或小其他块和内联元素应该这样做：

<div class="main"> <div class="img-container"> <img src="assets/img/main/icon.png" [alt]="APP_NAME"> </div> <div class="info-container"> <div class="app-name">{{ APP_NAME }}</div> <div class="app-version">Version {{ APP_VERSION }}</div> <div class="app-year">@{{ INITIAL_YEAR }}-{{ CURRENT_YEAR }} {{ APP_NAME }}</div> <div class="app-rights">All rights reserved</div> </div> </div>

2）模态将占用其最大大小（使用类my-stretch）。在这种情况下，任何离子页面都可以：

<ion-header> <ion-navbar> <ion-title>My Title</ion-title> </ion-navbar> </ion-header> <ion-content> <p> My content </p> </ion-content>

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

2 个答案: