Popup

Popup

A popup covers the screen on a phone and is a centered card from 630 by 630 px up. Use it for a separate task or document: a composer, terms and conditions. It is a <div class="popup"> holding a page with a popup-close link; swipeToClose: true lets the user drag it away.

A routable popup gets a URL, so Back and deep links work: the route has a popup key instead of component. BookNest's About screen:

A routable popup in src/js/routes.jsJavaScript

  { path: '/about/', popup: { component: AboutPopup, swipeToClose: true } }, // Section 2.12.3

about.f7's template root is the <div class="popup about-popup">, and it logs from $onMounted and $onBeforeUnmount:

Opening and closing the routable popup from the DevTools console

app.off('routeChange routeChanged'); // silence the logging handlers of Section 2.6.2
const router = app.views.main.router;
const pause = () => new Promise((done) => setTimeout(done, 800));
router.navigate('/about/');
await pause();
console.log(`url ${router.url} history ${JSON.stringify(router.history)}`);
app.popup.close('.about-popup');
await pause();
console.log(`url ${router.url} history ${JSON.stringify(router.history)}`);

Output

about popup mounted
url /about/ history ["/","/about/"]
about popup destroyed
url / history ["/"]

Closing the popup went back, like a page. sheet, popover, actions, loginScreen, panel and customModal keys work the same way.

MENU