Ionic 2 Modal 占宽度的 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%;
  }
}

1. 现在在 ion-content 中我们创建了两个 div 并且 ion-content 的背景应该是透明的（参见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"> 替换为 <ion-scroll class="modal_content" scrollY="true">，正如 Missak Boyajian 在 comment 中所说的那样

对于 Ionic3，您需要 this 来自 Alston Sahyun Kim 的评论。

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

所有代码均取自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的组件），它就不能很好地与上面的情况一起工作，因为模态假设容器应该具有其子容器的大小，这可能导致不良行为（模态将非常小，超出其应有的范围）：

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

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

注意事项：

1. 您可以更改前缀 my- 使用您选择的任何其他前缀（或不使用前缀）。
2. 您可以更改上述 CSS 中模态的最大宽度和高度，只要您觉得合适（我将两者都定义为 70%，在您的情况下为 50% 和宽度和高度分别为 80%）。
3. 以上屏幕截图是在桌面浏览器中截取的，但模式更改也适用于使用 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>