How to create a small modal which displays only in the centre of the page

Ionic Framework ionic-v3
1

I want to create a small modal which displays only in the centre of the page, currently if we are using ionic modal it takes the whole page. i just want the modal to come as an overlay on top of the current page . Is it possible ???

2

PopoverController doesn’t do what you want?

3

So… is there a way of doing it in any otherway

4

Did you tried Alert?

5

No… Is it possible to customise the styling of alert. I dont want a simple alert box.

6

Yes. You can customise it by CSS like you want

7

how ??? can give me sample

8

Create a modal and present it as is, and open your developers tools / whatever tools you have on your computer / browser. After that, it’s kindof a pain-staking process of inspecting elements to get the names of the classes and adding them to your scss file.

At least that’s how I do things that aren’t really common practice or documented. I think there’s also (maybe) some CSS classes that can be passed at modal options. Not 100% sure but if so it’s in the Ionic Docs.

Or a popover…

9

Here you have an exemple of the part of scss file from my project:

ion-alert{
  ion-backdrop {
    opacity: 0.2 !important;
  }
  .alert-wrapper {
    text-align: center;
    border-radius: 10px;
    padding: 15px;
    min-width: 210px;
    box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.09);
    }
}