Even if you use unload
or beforeunload
the form will never be displayed, this is because there is no way to prevent this, the use of unload
is aimed at small actions, such as destroying cookies
or sessionStorage
, read this answer:
Jquery beforeunload is called when I click on link
By the time the event is run the page has already started to be "destroyed" (read about destruct and GUI in C/C++ or C# applications to understand how Guis work in operating systems).
Also understand that events unload
and beforeunload
are not only called in the close window, but any page that does it will run as the event is not called onCloseWindow
(this event doesn’t even exist), it’s called onunload
, translating unload
would be like "download", ie the page loaded will be downloaded (or destroyed), each pagination, tab closure or window the event is triggered, ie using these events to call forms is a bad idea in every sense, besides very difficult to implement (or it would be impossible).
I recommend that you analyze what this form needs and see if this is really the best way.
Still if you really want to do it the way it is (which I personally find a terrible experience for the user) you should try using the beforeunload
with return
. Look at my answer:
Send message to browser
The code should look something like:
window.addEventListener('beforeunload', (event) => {
// Cancel the event as stated by the standard.
event.preventDefault();
//Para customizar o texto, e é necessário para funcionar no Safari e Chrome, IE e Firefox anterior a versão 4
event.returnValue = '';
});
This is the most that you will be able to prevent closure, if the user accepts, if not, infortunately has no way to force or control the user’s browser, the browser is his and if he wants to close everything has nothing to do, taking into account that it is very annoying some limitations that are placed on web pages that only make the user want to avoid certain websites.
How some websites manage to do this, such as facebook?
So I went to test, some people told me that on facebook a custom modal appeared when closing the window, but in fact this is a wrong impression of what happens, in fact when we click close tab or browser the screen that appears is this (if the text or comment field has a message not sent):
That custom modal appears when we click on links inside the site where the script is running thanks to window.onpopstate
, that is only occurs if click and links inside the site and do not close the page, see that here I filled the field "status" facebook and tried to click the link of another profile, the image that appeared to me was this:
So it’s actually a mistake and it’s impossible to customize the popup/modal of beforeunload
, because if we could not control events without asking the user what would be basically you control the actions of the user (and this nobody wants to right).
Take a look here
– Walker Leite
The correct event is the unonload.
– Danylo Santoro
@Walkerleite Plus I just want to show a window like this one for confirmation, and kind of replace it
– Ilgner de Oliveira
Possible duplicate of Capture event close window
– Daniel Omine
Maybe That might give you an idea
– Randrade
@Danielomine is not quite a duplicate, the problem he wants to fire a Modal similar to that of the bootstrap at the time of trying to close, the situation goes beyond. It is better to close as typing error (due to it having called a method that does not exist).
– Guilherme Nascimento
@Guilherme Nascimento, the question is different but the answer is the same. About the action after blocking the closure, it would be secondary question.
– Daniel Omine
@Danielomine I’m not talking about the question, the resolution is different, there does not say that DOM elements are not fired after the
unonload
, there is just an explanation of how to capture the "event". Here the question is about displaying a modal that is HTML (DOM) and the answer here explains why it doesn’t work. Both the question is different, as the answer does not cover the situation, I hope you understand as a constructive criticism ;)– Guilherme Nascimento
but that is exactly the crux of the matter... knowing how to do this, you will be able to proceed with the rest.. so I consider it duplicate
– Daniel Omine
@Danielomine all right, he learned to capture the event, cool, but he will manipulate the DOM and ready does not work after the
onbeforeunload
, because there will be a lock, what he wants is not this, he wants to display a form to subscribe to a newsletter, the solution in the other answer is only to ask if the guy really wants to leave the page,$("#modal_24").modal("show");
will never work ononbeforeunload
, only if the user clicks on the page, but he asks here that it be if the user is leaving and this in the other answer does not explain. So the question here is broader than the other :)– Guilherme Nascimento
exacerbado... Besides who should be clarifying should be the author of the question..
– Daniel Omine
@Danielomine the question may be bad the way it was written, but from the code it is possible to see what he expected the script to do. However if it were to close should fall more as "typo" than duplicate. He asked to run script, that is to say a specific script and not prevent the closure itself. (ps. always use the
@...
because otherwise the message does not reach whom you want to send, only if the post is his)– Guilherme Nascimento