up.layer up.layer.open([options])

JavaScript function

Render options to apply for opening the new overlay.

Common options are documented below, bust most options for up.render() may be used.

You may configure default layer options in up.layer.config. For example, options in up.layer.config.overlay become defaults for all overlays, while options in up.layer.config.drawer become defaults for all drawers.

Whether to apply navigation defaults.

The selector of root content element to place inside the overlay container.

The given { target } must be matchable within the HTML provided by either { url }, { content }, { fragment } or { document } option.

If the { target } option is emitted, Unpoly will use the first matching main target configured for the overlay mode. E.g. the default selectors for modals are configured in up.layer.config.modal.mainTargets. See main targets in overlays.

Whether to stack the new overlay or replace existing overlays.

The following values are supported:

The link or button element that caused this overlay to open.

The origin will be re-focused when the overlay closes.

When opening a popup, the overlay will be anchored relative to the origin element.

For popups, the position of the popup relative to the link or button that opened the overlay. See popup position.

For drawers, the screen edge on which to position the drawer (left or right). See drawer position.

For popups, the alignment of the popup within its { position }. See popup position.

The URL to request from the server.

See loading content from a URL.

The HTTP method to use for the request.

Common values are 'get', 'post', 'put', 'patch' and 'delete'. The value is case insensitive.

Additional parameters that should be sent as the request's query string or payload.

When making a GET request to a URL with a query string, the given { params } will be added to the query parameters.

An object with additional request headers.

Unpoly will by default send a number of custom request headers. E.g. the X-Up-Target header includes the targeted CSS selector. See up.protocol for details.

Whether to abort existing requests before rendering.

By default, opening a new overlay will abort all requests within the main element of its base layer.

See aborting requests for details and a list of options.

Whether the request may be aborted by other requests.

By default, the request will be aborted:

• By another request opening another overlay from the same base layer
• By another request targeting the base layer's main element

See Preventing a request from being aborted.

Whether this request will load in the background.

Background requests deprioritized over foreground requests. Background requests also won't emit up:network:late events and won't trigger the progress bar.

The number of milliseconds after which this request can cause an up:network:late event and show the progress bar.

To prevent the event and progress bar, pass { lateDelay: false }.

Defaults to up.network.config.lateDelay.

The number of milliseconds after which this request fails with a timeout.

Defaults to up.network.config.timeout.

Whether to render failed responses differently.

Failed responses will be rendered using options prefixed with fail, e.g. { failTarget }.

By default any HTTP status code other than 2xx or 304 is considered failed. Pass { fail: false } to handle any response as successful, even with a 4xx or 5xx status code.

The new inner HTML for the targeted fragment.

See Updating an element's inner HTML from a string.

Instead of passing an HTML string you can also refer to a template.

A string of HTML comprising only the new fragment's outer HTML.

When passing { fragment } you can omit the { target } option. The target will be derived from the root element in the given HTML.

See Rendering a string that only contains the fragment.

Instead of passing an HTML string you can also refer to a template.

A string of HTML containing the targeted fragment.

See Extracting an element's outer HTML from a larger HTML string.

Instead of passing an HTML string you can also refer to a template.

An up.Response object that contains the targeted fragments in its text.

See Rendering an up.Response object.

The kind of overlay to open.

See available layer modes.

The size of the overlay.

Supported values are 'small', 'medium', 'large' and 'grow'.
See overlay sizes for details.

An optional HTML class for the overlay's container element.

See overlay classes.

How the overlay may be dismissed by the user.

Supported values are 'key', 'outside' and 'button'.
See customizing dismiss controls for details.

You may enable multiple dismiss controls by passing an array or a space-separated string.

Passing true or false will enable or disable all dismiss controls.

The label for the dismiss icon in the top-right corner.

The accessibility label for the dismiss icon in the top-right corner.

Whether to trap focus within the overlay while it is in front.

By default focus is trapped for all overlays except popups.

The data object object for the overlay's root content element ({ target }).

If the content element already has an [up-data] attribute, this option will override individual properties from that attribute.

The initial context object for the new overlay.