Javascript: show Twitter-Bootstrap modal before reload page

Question

I'm trying to show a modal (with a message and the confirm button) before page reload.

I have to check an array: if it is empty I do the refresh, If it's not I want to show the modal and ask to the user if want to reload.

I tried this code:

$(window).bind('beforeunload', function(){
            if(_pendent_annotations.length > 0){
                $('#change_document').modal('show');
                $("#change_doc_button").click(function(){
                                location.reload();
                });
                return false;       
            }

        });

The problem is that on reload it shows an alert with the message:

"Are you sure you want to navigate away from this page?

false"

Then I can choose to leave or to stay, if I choose to leave it reloads if I choose to stay it shows my modal .

How can I avoid the alert and only show my modal to make the user choose?

Thanks

Answer 1

Try this out: You need to prevent the event to return anything.

window.addEventListener('beforeunload', function(event){
    if(_pendent_annotations.length > 0){
        $('#change_document').modal('show');
        $("#change_doc_button").click(function(){
              location.reload();
        });      
    }
});

https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload