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

It’s not hard…
Samething:

ion-page.modal {
    padding: 30px;
    background: rgba(0,0,0,0.5);
}

cc // @iborik @icarus_31 @fredy26

9 Likes

yep! working like a charm!

thanks @iborik

1 Like

Thanks @xr0master for this little example. I will work out a Pen in a couple of days with some little extra’s and i’ll post it over here. It’s been a little busy lately, so I hadn’t had the time to explain it any faster :slight_smile:

2 Likes

Hi,
I tried this code in the .sccs (only this code in the file) of my modal page but it doesn’t work, the page still occupy 100% of space !
Do you have any idea why it’s not working in my case ? :frowning:

Thanks in advance!

Cordova CLI: 6.1.1
Ionic Framework Version: 2.0.0-beta.6
Ionic CLI Version: 2.0.0-beta.25
Ionic App Lib Version: 2.0.0-beta.15
OS: Windows 7 SP1
Node Version: v4.4.3
1 Like

Ok with the code in .scss of the opening page it’s working !

With the introduction of Inset Modals in Beta7 you might want to use the approach in the second post here:

…which I believe allows a bit more flexibility based on the height of the modal dialog (and circumvents any ionic2 beta7 modal inset css overwriting any custom css you have made).

can you please give the css code for it…and how you are using it

Hey @xr0master thx for the css. I would like to have the white area with half the size but still centered vertically (like the real alerts are). How could I do that? Thx again

is it still working with rc1 ?

This worked for me:

ion-modal {
position: absolute;
top: 80px;
left: 45px;
display: block;
width: 70%;
height: 62%;
}

You can try it out if you want to find that out :wink: If you want to define a custom inset modal just use some custom css as @webtalk suggests.

.modal-wrapper {
position: absolute;
top: 80px;
left: 45px;
display: block;
width: 70%;
height: 62%;
}

Or just add a padding to ion-modal and add a background to see a nice backdrop:

ion-modal {
padding: 30px;
background: rgba(0,0,0,0.7)
}

3 Likes

can you provide something more than css, for zero-start beginners?

I’ve tried both of the proposed CSS solutions, and they both seem to prevent enableBackdropDismiss from working on phones. I think the padding is making the ion-backdrop unreachable, but I don’t know how to fix this. Any ideas?

1 Like

You have found a solution to this??

any update on this :slight_smile:

1 Like

My solution to this:

import { Renderer } from '@angular/core';
import { ModalController, NavParams, ViewController } from 'ionic-angular';

@Component(...)
class HomePage {

  constructor(
    public modalCtrl: ModalController
  ) { }

  presentProfileModal() {
    let profileModal = this.modalCtrl.create(Profile, { userId: 8675309 });
    profileModal.present();
  }

}

@Component(...)
class Profile {

  constructor(
    params: NavParams,
    public renderer: Renderer,
    public viewCtrl: ViewController
  ) {
    this.renderer.setElementClass(viewCtrl.pageRef().nativeElement, 'my-popup', true);
    console.log('UserId', params.get('userId'));
  }

}

Add this to your scss:

ion-modal.my-popup {
  @media (min-width: 300px) and (min-height: 500px) {
    ion-backdrop {
      visibility: visible;
    }
  }

  .modal-wrapper {
    position: absolute;
    overflow: hidden;
    max-width: 280px;
    border-radius: 2px;
    width: 80vw;
    height: 50vh;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border: 0;
    box-shadow: 0 16px 20px rgba(0,0,0,.4);
    background-color: #fafafa;
  }
}

Or this css, which will propose dynamic height:

ion-modal.my-popup {
  @media (min-height: 500px) {
    ion-backdrop {
      visibility: visible;
    }
  }

  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: $z-index-overlay;

  display: flex;

  align-items: center;
  justify-content: center;

  contain: strict;
  .modal-wrapper {
    &,
    .ion-page,
    .ion-page .content,
    .ion-page .content .scroll-content {
      contain: content;
      position: relative;
      top: auto;
      left: auto;
    }

    z-index: $z-index-overlay-wrapper;
    display: flex;
    overflow: hidden;

    flex-direction: column;

    min-width: $alert-min-width;
    max-height: $alert-max-height;

    opacity: 0;

    height: auto;
    max-width: $alert-md-max-width;
    border-radius: $alert-md-border-radius;
    background-color: $alert-md-background-color;
    box-shadow: $alert-md-box-shadow;

    .ion-page .content {
      background-color: color($colors, light);
    }
  }
}

I just set a class to modal element when it is called and change the style.

  • The modal implementation source is based in the official API ModalController
15 Likes

Hey @rodolfosilva this worked like a charm. I have a question though, Do you know how can I disable the click on the back drop, thank you!

Thanks :smile: .

Yes, when you create the modal, you need to pass a parameter with enableBackdropDismiss = false.

Check this link:

Any idea on how to do i get the content right. I want the modal window to be as big as my content. Here is the screen shot of how am i currently having it.

The modal has too many white spaces and blank lines at the bottom.

Here is the code of modal page:

<ion-content padding class="guide-modal">
    <div>
      <p>SUPER!!!!</p>
      <p>Some Gyan First!</p>
      <p>We preach sustainable weight loss - max 1 </p>
      <p>kg of weight loss a week is healthy and </p>
      <p>tha is exactly what we would help you </p>
      <p>acheive :)</p>
      <button ion-button (click)="setGyanInput()">Hmmm, that's the right way</button>
    </div>
</ion-content>

And the SCSS is as:

page-guide {
    .guide-modal .modal{
        $modal-inset-min-width:0;
        $modal-inset-min-height-small:0;
        display: flex;
        height: auto;
    }
}

How to make border
I add border and border-radius, but it not working

The result: