Problem with close modal event

[Leenoz-com]

Summary

Close modal event

Steps to Reproduce

Hello, I hope someone can help. I'm trying to clear the form fields after modal closing, but this code doesn't work.

const el = HSOverlay.getInstance('#modal');

el.on('close', (instance) => {
  console.log('Close the modal');
  $("#modal form").reset();
});

However, this code works fine.

const el = HSOverlay.getInstance('#modal');

el.on('open', (instance) => {
  console.log('Open the modal');
  $("#modal form").reset();
});

Demo Link

https://preline.co/plugins/html/overlay.html#js-events

[chriseugenerodriguez]

bump

[siautilas]

As a temporary solution, you can implement the following code:

const modal = document.getElementById('hs-large-modal');

// Set up an event listener for when the modal is closed
modal.addEventListener('close.hs.overlay', function() {
    console.log('Modal has been closed.');
});

[robertmerten]

I'm encountering the same issue.

@siautilas For me this even only fires when actively closing the modal, not when clicking on the overlay unfortunately.

[siautilas]

@robertmerten For the overlay, you may try utilizing an event listener on the document. Here’s an example:

document.addEventListener('close.hs.overlay', function() {
  console.log('The modal has been closed.');
});

[olegpix]

@Leenoz-com Hi, Thanks for the heads up, this is a mistake in the documentation. Try to use this code instead:

const el = HSOverlay.getInstance('[data-hs-overlay="#hs-basic-modal"]', true);

el.element.on('open', (instance) => {console.log(instance)});

1. You need to add true as the second argument to the getInstance method.
2. The on method is available on el.element

[Leenoz-com]

Hi @olegpix , This code only works with "open". The issue with the closing event and not the opening.

[Leenoz-com]

@robertmerten For the overlay, you may try utilizing an event listener on the document. Here’s an example:

document.addEventListener('close.hs.overlay', function() {
  console.log('The modal has been closed.');
});

This code solved the problem. Thanks @siautilas