I want to load an overlay when the user closes the web browser

Question

When a user presses the close button on the browser or tab, I want to action an overlay, wait for a second, then close. I know its not a done practice and I've stood on my soap box and cried about what is acceptable to the user and such but, they want it...

I know that the browsers close action is pretty explicit in what it can do, so where do I start?

Thanks

score 0 · Answer 1 · answered Apr 29 '16 at 08:23

0

I know that the browsers close action is pretty explicit in what it can do

Correct.

It can pause while asking the user if they really want to close the window or not using a standard UI.

… and that's it.

so where do I start?

But telling your client that browsers don't provide any way to do what they want.

answered Apr 29 '16 at 08:23

Quentin

914,110
126
1,211
1,335

I get totally what your saying and I've said this to them. – KaiMHirst Apr 29 '16 at 08:35
"Not using a standard UI". Can you please provide context on this. Thanks – KaiMHirst Apr 29 '16 at 08:36
@KaiMHirst — Umm. That's "asking the user if they really want to close the window or not" and "using a standard UI". *not* isn't a modifier to *standard* in that sentence. http://stackoverflow.com/questions/1119289/how-to-show-the-are-you-sure-you-want-to-navigate-away-from-this-page-when-ch – Quentin Apr 29 '16 at 08:38
"And Ive already had this conversation with them" — Their refusal to accept reality won't change reality. – Quentin Apr 29 '16 at 08:39

score 0 · Accepted Answer · answered Apr 29 '16 at 08:40

you could hook the onbeforeunload event, and have a overlay element hidden, then show it inside the event

overlay element

<div id="dark-overlay" style=""></div>

css

#dark-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.6;
    z-index: 1000;
    display: none;
}

javascript

<script type="text/javascript">
    window.onbeforeunload = function(event){
         var overlayelement = document.getElementById('dark-overlay');
         overlayelement.style.display = 'block';
         return 'are you sure you want to quit?';
    }
</script>

note this won't exactly achieve what you asked: it will show an overlay, along with a browser confirm dialog containing the text you returned.

I couldn't think of a way to wait a second before exiting, except putting a loop that exits after the defined amount of time which is terribly inefficient.

This is good. Its what I was working on prior to asking this so thanks its really helpful. :-) — KaiMHirst, Apr 29 '16 at 08:55
you're welcome, if my answer helped you you can up-vote it, if it solved your question you can mark it as an answer :) — Souhaieb Besbes, Apr 29 '16 at 10:42

I want to load an overlay when the user closes the web browser

2 Answers2