# Modal JS API

The JS API is primarily configured through SA5's Modal [Controller](https://attr.sygnal.com/overview/sa5-core/controllers).  

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="https://2168358812-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsBcvwQ6TdfCVq8IuMako%2Fuploads%2F2JFIoNImMhWvIzw9bwUr%2Ffile.excalidraw.svg?alt=media&#x26;token=ff7b26a1-43d7-4c04-992f-03320a50fd0a" 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    |                                                               |   |