| icon |
|---|
arrow-down-arrow-up |
You may often want to perform an action as soon as you open or close a modal. Up until now, you had to skillfully employ setTimeout() in order to trigger your function after the modal is done animating. With Modalfy v3, you no longer have to think about it thanks to the built-in support of callbacks.
The openModal() function now accepts a 3rd argument that designates your callback. Simply provide it and you should see it be invoked after the modal has been opened (this includes animation time as well).
{% tabs %} {% tab title="TypeScript" %}
openModal('WelcomeModal', undefined, () => {
console.log(`✅ Opened WelcomeModal`)
})
openModal('ErrorModal', { titleColor: 'red' }, () => {
closeModal('WelcomeModal')
}){% endtab %} {% endtabs %}
{% hint style="info" %}
As you can see, openModal()still expects themodalNameandparamsas the first two arguments, with the latter being optional.
{% endhint %}
As you'd expect, all the closing methods have also received a new argument that behaves in the same capacity:
{% tabs %} {% tab title="TypeScript" %}
closeModal('ErrorModal', () => openModal('LoginModal'))
closeModals('ErrorModal', () => console.log('✅ Closed all ErrorModal'))
closeAllModals(() => console.log('✅ Closed all modals')){% endtab %} {% endtabs %}
{% hint style="info" %}
You'll notice that closeModal() first argument is optional. That's you can either provide undefined (to close the latest opened modal) or specify a name to close another one.
{% endhint %}
If you're using animationIn/animationOut to drive the modal animations yourself, remember that you have to call the new callback argument there in order for your callbacks to be called. You can refer to the dedicated section in the Upgrading from v2.x guide to learn more about it.