> For the complete documentation index, see [llms.txt](https://docs.airdev.co/applications-platform-template-reference/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.airdev.co/applications-platform-template-reference/assets/reuseables/popupsreusable.md).

# popupsreusable

## Popups Reusable Overview

There are a few standard popups that we put into a reusable element so you can trigger them as needed rather than creating many copies.

The reusable element `popupresuable` contains the sign up / login popup, loader popup, and message popup. You can trigger custom workflows from the header (which contains the `popupsreusable` element) to show certain popups. Or if the page the you're building does not have a header, please add the `popupsreusable` element to the page so you can trigger custom workflows from that element.

### Signup / login popup

There is a `signup/login` reusable element which is used across the app (login page, homepageblocks, popupsreusable). For more information, [click here](/applications-platform-template-reference/assets/reuseables/signup-login.md).

![](https://1504701494-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdukpFHinhBRguGr-7T%2F-Ldv0OTHjRLFUYw5rVQX%2F-Ldv0QQcmwtWAIrD_bVP%2Fscreen-shot-2019-03-12-at-3.34.40-pm.png?generation=1556842143302139\&alt=media)

### Message popup

With the message popup, you can display a simple message (e.g., “Your account is pending, and will become active once approved”) and make the user click “OK”.

![](https://1504701494-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdukpFHinhBRguGr-7T%2F-Ldv0OTHjRLFUYw5rVQX%2F-Ldv0QQeATJ5Nyvbm2Fl%2Fscreen-shot-2019-03-12-at-3.36.22-pm.png?generation=1556842142779638\&alt=media)

* The message popup (no esc) contains a popup title text, body message, and a button.
* You can pass a string of text for the content of the popup by triggering a custom workflow from a reusable element (header or popupsreusable):
  * The custom workflow "show message popup (no esc)" is of type text
  * Simply pass a text string in this format:
    * This is a title{This is the body message}This is the close button text
      * Any text before { is the title of the popup
      * Any text between { } is the body text of the popup
      * Any text after } is the button text of the popup

### Loader popup

With the loader popup, you can display a loading icon over the whole page for some time (to avoid a bad/choppy experience)

{% hint style="warning" %}
This should be used sparingly in cases of very complicated and slow pages.
{% endhint %}

![](https://1504701494-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdukpFHinhBRguGr-7T%2F-Ldv0OTHjRLFUYw5rVQX%2F-Ldv0QQgw0da8d2Nk_iV%2Fscreen-shot-2019-03-12-at-3.38.14-pm.png?generation=1556842142293682\&alt=media)

* The loader popup contains the standard full page HTML loader popup
* You can trigger the loader popup by triggering a custom workflow called "show loader popup" from a reusable element ([header](https://docs.airdev.co/canvas/assets/reuseables/header) or popupsreusable)
* On the page that you are displaying the loader popup, add the following workflow:
  * *Do when condition is true and only when page loaded (entire) is "yes"*, trigger custom workflow "close loader popup" from reusable element