> For the complete documentation index, see [llms.txt](https://attr.sygnal.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://attr.sygnal.com/sa5-modals/webflow-popups-and-modals/modal-js-api.md).

# Modal JS API

The JS API is primarily configured through SA5's Modal [Controller](/overview/sa5-core/controllers.md).  

This is exposed dorectly through SA5 Core's controllers; 

```
window.sa5.controllers.modals
```

## Use Cases 

These are some useful setups

### Gated Modals 

Use a form modal as a "gate" for content access.

* User must fill in the form to proceed 
* When the user has passed the gate they see the content 
* They do not need to re-pass the gate 

<img src="/files/8lLu8TfexRkLvAULN9Wv" alt="" class="gitbook-drawing">

{% hint style="success" %}
You can use cookies, sessionStorage or localStorage to keep the gate "open" for subsequent visits.&#x20;
{% endhint %}

## Display a Modal

`display(modalName: string, force: boolean)` show the item &#x20;

* `modalName` is the name of the modal as defined by the `wfu-modal` attribute. &#x20;
* `force` = `true`, will display the modal even when it is marked as suppressed in cookies.&#x20;

Example; &#x20;

```javascript
sa5.controllers.modals.display("modal1", true);  
```

## Close all Modals&#x20;

`closeAll()`&#x20;

Example; &#x20;

```javascript
sa5.controllers.modals.closeAll();   
```

Close on submit&#x20;

wfu-modal-trigger-close-formsubmit=""&#x20;

## Future

Link IFRAME to Modal automatic

Pre-defined modal default

v. Modal template&#x20;

* Pre-defined modals
* Modals
* Modal Templates&#x20;

|                   | Content Source                                                |   |
| ----------------- | ------------------------------------------------------------- | - |
| pre-defined modal | <ul><li>Element-sourced</li><li>URL IFRAME-sourced </li></ul> |   |
| modal             | Explicit                                                      |   |
| modal template    |                                                               |   |