如何在 ionic 2 中制作自定义警报？答案

【问题标题】：How to make customized alert in ionic 2?如何在 ionic 2 中制作自定义警报？
【发布时间】：2018-10-01 17:01:26
【问题描述】：

您能告诉我如何在 ionic 2 中制作自定义警报吗？喜欢在右上角添加图像使其可点击

【问题讨论】：

【解决方案1】：

我们可以通过为 Modal 提供填充来使用 Modal 而不是 Alert。添加 Modal 并在 App.scss 中编写此代码:)

ion-modal {
    background-color: rgba(0, 0, 0, 0.5);
    ion-content.content{
        top: 20%;
        left: 10%;

        width: 80%;
        height: 50%;
        border-radius: 10px;
        .scroll-content {
            border-radius: 20px;
        }
    }
}

【讨论】：

有没有办法让它适合内容大小？所以它不会随着屏幕拉伸？
@Tadija Bagarić 你可以给背景颜色透明所以白色背景不会看到所以你的内容现在适合:)

【解决方案2】：

对于这些，我总是只创建一个自定义模式页面。您可以完全控制模态的所有方面，包括大小。它基本上只是一个带有控制器和模板的页面，也超级容易实现。

http://ionicframework.com/docs/v2/api/components/modal/ModalController/ 应该会让你准备就绪

【讨论】：

【解决方案3】：

我正在使用以下方法来获得所需的模态尺寸。

.always-modal .modal-wrapper{
    background: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 100%;
    left: unset !important;
    top: unset !important;
    .ion-page{
        margin:0 auto;
        position: relative;
        top:10%;
        width: 75%;
        height: 80%;
    }
}

现在，每当我需要具有这些属性的模态时，我都会在模态选项中传递以下内容。

{ cssClass: "always-modal" }

当用户点击背景区域时，我无法弄清楚如何关闭此模式。

【讨论】：

有没有办法让它适合内容大小？所以它不会随着屏幕拉伸？
{showBackdrop: true, enableBackdropDismiss: true } 将在点击外部区域时关闭