question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

feat: Open Page in Modal-Style

See original GitHub issue

Feature Request

Ionic version:

[x] 5.x

Describe the Feature Request

The Idea is to use a modal globally in the app. Currently a modal depends on a specific page, can’t be lazy loaded and the same modal can’t be used on another page without copying it. So the idea is to add an option to make it possible to let a page appear as a modal.

Describe Preferred Solution

Maybe a parameter that can be passed to the NavController.

await this.navController.navigateForward('/foo', {
    showAsModal: true
});

Describe Alternatives

Alternative is to use the ModalController, but it has some disadvantages like mentioned before.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
liamdebeasicommented, Jun 22, 2020

history.push is just the web’s standard history API, so providing an animation here will not work. Regarding React, we are working on significant updates to routing in React, so the per-page animation feature will be available when that ships (soon).

0reactions
ionitron-bot[bot]commented, Jul 22, 2020

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Read more comments on GitHub >

github_iconTop Results From Across the Web

feat: Open Page in Modal-Style · Issue #21477 · ionic ... - GitHub
The Idea is to use a modal globally in the app. Currently a modal depends on a specific page, can't be lazy loaded...
Read more >
Modal - Bootstrap
Use Bootstrap's JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
Read more >
Prevent Page Scrolling When a Modal is Open | CSS-Tricks
If we know the top of the scroll location and add it to our CSS, then the body will not scroll back to...
Read more >
Build A Custom React JS Modal - Using Hooks (Pop-up ...
In this video I will share with you how to build a custom modal (pop-up) in ... Build A Custom React JS Modal...
Read more >
How To Make a Modal Box With CSS and JavaScript
A modal is a dialog box/popup window that is displayed on top of the current ... <button id="myBtn">Open Modal</button> ... modal.style.display = "block";...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found