Instead of linking to a page fragment, you can choose to show a fragment in a popup overlay that rolls down from an anchoring element.
To open a popup, add an
up-popup attribute to a link:
<a href="/options" up-popup=".menu">Show options</a>
When this link is clicked, Unpoly will request the path
/options and extract
an element matching the selector
.menu from the response. The matching element
will then be placed in the popup overlay.
The popup closes when the user clicks anywhere outside the popup area.
The popup also closes when a link within the popup changes a fragment behind the popup. This is useful to have the popup interact with the page that opened it, e.g. by updating parts of a larger form.
To disable this behavior, give the opening link an
Popups have a minimal default design:
The easiest way to change how the popup looks is to override the default CSS styles.
The HTML of a popup element is simply this:
<div class="up-popup"> ... </div>
Opens this link's destination of in a popup overlay:
Attaches a popup overlay to the given element or selector.
Closes a currently opened popup overlay.
Returns the URL of the page or modal behind the popup.
Returns whether popup modal is currently open.
Returns the URL from which the current popup's contents were loaded.
Sets default options for future popups.