Modals

It is possible to navigate into pages that are further up but still give the impression you are navigating deeper down. This is useful for modal windows that you might want to show on multiple pages. Just append modal: true and the page is accessible for sub-pages to sibling-pages.

Show first sub-page Show second sub-page
First sub-page Show an alert!
Second sub-page Show an alert!
<div data-bind="page: {id: 'start'}">
    <a data-bind="page-href: 'first'" class="btn">Show first sub-page</a>
    <a data-bind="page-href: 'second'" class="btn">Show second sub-page</a>

    <div data-bind="page: {id: 'first'}" class="well">
        First sub-page
        <a class="btn" data-bind="page-href: 'alert'">Show an alert!</a>
    </div>
    <div data-bind="page: {id: 'second'}" class="well">
        Second sub-page
        <a class="btn" data-bind="page-href: 'alert'">Show an alert!</a>
    </div>
</div>
<div data-bind="page: {id: 'alert', modal: true}" class="modal hide">
    <div class="modal-header">
        <a data-bind="page-href: '../'" class="close" data-dismiss="modal" aria-hidden="true">×</a>

        <h3>Alert</h3>
    </div>
    <div class="modal-body">
        <p>Lorem Ipsum</p>
    </div>
    <div class="modal-footer">
        <a data-bind="page-href: '../'" class="btn">This button get an auto-calculated href based on modals current location</a>
    </div>
</div>