如何在离子2中进行自定义警报?

时间:2016-12-27 14:30:45

标签: cordova angular ionic2

您能告诉我如何在离子2中制作自定义警报吗?比如在右上角添加图片使其可点击

3 个答案:

答案 0 :(得分:8)

我们可以使用模态而不是通过将填充赋予模态来使用警报..添加模态&在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;
        }
    }
}

答案 1 :(得分:1)

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

http://ionicframework.com/docs/v2/api/components/modal/ModalController/应该让你全部设置

答案 2 :(得分:1)

我使用以下来获得所需的模态大小。

.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" }

当用户点击背景区域时,我无法弄清楚如何解雇此模态。