How to make customized alert in ionic 2?
Solution 1
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
Solution 2
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;
}
}
}
Solution 3
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.
Bilal Malik
Updated on June 30, 2022Comments
-
Bilal Malik almost 2 years
Can you please tell me how to make a customized alert in ionic 2 ? like add image at top right corner make it clickable
-
Tadija Bagarić over 6 yearsIs there a way to have it fit content size? So it doesn't stretch with the screen?
-
Tadija Bagarić over 6 yearsIs there a way to have it fit content size? So it doesn't stretch with the screen?
-
Krunal Vaghela over 6 years@Tadija Bagarić you can give background color Transparent so white background will not seen so your content is fit now :)
-
ir2pid over 4 years{showBackdrop: true, enableBackdropDismiss: true } will dismiss on clicking outside region