Show modal with navbar

Back to How-to Discussions

My application is using a tabbed page, with a navbar that is located outside of navigator. I would like to show a modal (Another page with navbar) that is put on top of the existing navbar. Like this video: https://vimeo.com/137414058

Is that possible?

Yes this is very possible :)

You can either use another Navigator outside the one you currently have and just use that for the modal (the router can handle multiple levels of navigation).

Or you can use a WhileTrue that you just toggle on and off which has the modal inside it:

<App>
<WhileTrue ux:Name="modal">
    <Panel><!-- <- this is your modal panel, use AddingAnimation and RemovingAnimation to give it some animation when it appears -->

        <AddingAnimation ....
    </Panel>
</WhileTrue>
.. main app content ..
<!-- the modal can be toggled using for example the `Toggle` action:
    <Clicked>
        <Toggle Target="modal" />
    </Clicked>
</App>

I cannot find a good solution that works with multiple navigators. Router.goto("profilePage"), does not work if I wrap navigator inside another navigator. As you can see from the code, is the modal. I am using router.push("filterModalPage"); from the alternative root (AlternateRoot ParentNode="navBar"). The problems, is as described that the page is stopping just below the navbar. Can you give a code example how to fix this with multiple navigators?

''

<JavaScript>
    var Observable = require("FuseJS/Observable");
    var selectedPage = Observable('mapPage');

    selectedPage.onValueChanged(module, function(item) {
        switch(item) {
            case 'mapPage' : 
                router.goto("mapPage");
                break;
            case 'profilePage' : 
                router.goto("profilePage");
                break;

            case 'itemPage' : 
                router.goto("itemPage");
                break;

        }
    });

    module.exports = {
        selectedPage: selectedPage
    };
</JavaScript>
<Router ux:Name="router" />
<ClientPanel>
    <NavBar ux:Name="navBar" Dock="Top" />
    <Navigator DefaultTemplate="mapPage" Transition="None">
        <MapPage ux:Name="mapPage" router="router" navBar="navBar" />
        <ProfilePage ux:Name="profilePage" router="router" navBar="navBar" />
        <ItemPage ux:Name="itemPage" router="router" navBar="navBar"/>
        <FilterModalPage ux:Name="filterModalPage" />
    </Navigator>

    <BottomBar Dock="Bottom" SelectedPage={selectedPage} />
</ClientPanel>

''

Post Stats
  • 2
    replies
  • 720
    views
  • 2
    users