Custom modal / alert (with HTML, form...)

Ionic Framework ionic-v3
37

cool @oopets, thx for your solution.

I modified your code like following to have a modal customized for iOS and Android:

modal {
    ion-content {
        &.content {
            div.scroll-content {
                top: 10%;
                left: 10%;
                width: 80%;
                height: 80%;
                overflow:hidden;
            }
        }

        &.content-ios {
            background-color: rgba(0, 0, 0, 0.3);

            div.scroll-content {
                background-color: #f8f8f8;
                border-radius: 13px;
                padding: 16px;
            }
        }

        &.content-md {
            background-color: rgba(0, 0, 0, 0.5);
            
            div.scroll-content {
                background-color: #fafafa;
                border-radius: 2px;
                box-shadow: 0 16px 20px rgba(0, 0, 0, 0.4);
                padding: 24px;
            }
        }
    }
}