# 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    |                                                               |   |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://attr.sygnal.com/sa5-modals/webflow-popups-and-modals/modal-js-api.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.