How to make customized alert in ionic 2?

Question

Can you please tell me how to make a customized alert in ionic 2 ? like add image at top right corner make it clickable

Krunal Vaghela · Answer 1 · 2018-10-01T09:01:26.913

8

We Can Use Modal Instead Of using Alert by Giving Padding to Modal.. Add Modal & Write This Code In 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;
        }
    }
}

edited Oct 01 '18 at 09:01

answered Sep 10 '17 at 05:46

Krunal Vaghela

1,007
2
12
22

Is there a way to have it fit content size? So it doesn't stretch with the screen? – Tadija Bagarić Oct 27 '17 at 09:16
1

@Tadija Bagarić you can give background color Transparent so white background will not seen so your content is fit now :) – Krunal Vaghela Oct 29 '17 at 08:40

score 1 · Accepted Answer · answered Dec 27 '16 at 16:32

For these I always just create a custom modal page. You can full control all aspects of a modal, including sizing. It's basically just a page with a controller and template, super easy to implement too.

http://ionicframework.com/docs/v2/api/components/modal/ModalController/ should get you all set

score 1 · Answer 3 · answered Oct 25 '17 at 05:22

1

I am using following to get the desired modal size.

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

Now whenever I need a modal with these properties I pass following in modal options.

{ cssClass: "always-modal" }

I am not able to figure out how to dismiss this modal when user taps on background area.

answered Oct 25 '17 at 05:22

Sanchit

460
3
14

Is there a way to have it fit content size? So it doesn't stretch with the screen? – Tadija Bagarić Oct 27 '17 at 09:16
{showBackdrop: true, enableBackdropDismiss: true } will dismiss on clicking outside region – ir2pid Oct 26 '19 at 18:41

How to make customized alert in ionic 2?

3 Answers3

Linked