I take thought. Sometimes we need to open anything page by click a button. For example: click by the create button and open a form page.
And all time I think that what use? Page or Modal?
So my question: anybody can explain me where we use modals and where pages. What is the best practice?
Thanks.
If there’s nothing the page should do execpt showing data or a form, a modal is fine.
I use a page if the page has navigation, or results in opening other pages (i.e. a wizard of some kind), or is too large for a single window.
Use modals with care 
Maybe maybe… Thanks.
However, why Ionic Team have created a modals? For what purpose?
Because in specific situations, they are the best solution
For example?
Maybe @mhartington can say something about it.
I tend to fall back on to Apples HIG.
A modal view—that is, a view presented modally—provides self-contained functionality in the context of the current task or workflow.
I’d use a modal when the context is different and not an important part of the app.
Thank you all. I think, I got it.
The modal, to try and sum it up, is a way to step out of the normal flow of the app so the user can accomplish something prior to continuing on their way.
And the example for understanding:
For example, go to the Settings app → Mail → Add new account (all presented via a navigation hierarchy) - choose one of the providers and a “login page” is presented, modally. Once you fill it out and the whole thing is confirmed, the modal disappears and you are back to your account list. Another example is in the Calendar app, when you add an event, which takes you out of the process of viewing events, the view is presented modally - when you go to assign a calendar, however, the view is presented hierarchically.
PS there quotes of Josh Bruce
I was asking myself this same question because I tend to favor modals, and was wondering if there is a difference in terms of memory or whats still loaded. If I open a modal, I’m assuming all pages are still open, is the same true when you push a page?
Better don’t mix them up. NavController and ModalController both have a different navigation stack. If you push to a new page inside a modal, it lands on the ModalController-Stack. If you open a modal in a new modal, that modal is pushed to the ModalController-Stack and does not create a new stack. Usually I use modal only for specific features that are not the main tasks of the app like login or presenting a feedback form. I try to prevent navigation inside of a modal. Better use pages over modals. Modals don’t really have a benefit over pages.
Regarding the history of your navigation stack, all pages will stay open as long as you don’t modify your nav stack or use something like setRoot or popToRoot. But if you are in a modal and push pages to the stack, these get pushed on the nav stack of the modal controller. I assume that when you close the modal, these pages will get removed to.
what do you mean on page or modal?
Sorry I don’t understand your question. What exactly do you want to know?
I don’t generally use navigation within a modal. But what if I have a form? I’m never sure if I should use a modal or a page but I guess there is really no correct answer
If the form is part of your workflow, for example creating a new recipe in a cooking app, then I would recommend a page over a modal. Wikipedia says it is an interaction blocking dialog.
Ionic component documentation says: Modals slide in off screen to display a temporary UI, often used for login or signup pages, message composition, and option selection.
Its api documentation says: Usually it is used for making a choice or editing an item.
The human interface guidelines from apple give a nice description of modality:
https://developer.apple.com/ios/human-interface-guidelines/app-architecture/modality/
Can you add any screenshot or video how todo this correctly?
hello,
you are asking on an older post. Explain a little bit more what you want to get.
If you wanna see a modal in action, then look to the docs https://beta.ionicframework.com/docs/api/modal
ion-modal component is a flexible ui modal, where action sheet, etc also ui modals but for more specific scenarios.
Maybe that helps, otherwise give us a more specific question.
Best regards, anna-liebt
thank you for the answer, Anna!