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


#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);
    }
}