Question

How can I show a message like a popup modal if a user has entered some content and then not saved it and try to leave the page?

Something like:

This appears if you try to go to another page within Facebook BUT if you type in the URL then you get a native alert box like:

1.) What is the difference? Is the alert something that is built into browsers?

2.) How can I use jQuery to create my own custom modal boxes when similar events happen?

Thanks

Answer 1

Since you’re using jQuery for this, I would attach the default values to each elements data holder, then using the onbeforeunload code above check all the current values against the stored original values… An example:

$(document).ready(function() {
    $('#formID input').each(function() {

        $(this).data('original', $(this).val());

    });
});

window.addEventListener('beforeunload', beforeUnload, true);
$(".submit").click(function(){
    window.removeEventListener('beforeunload', beforeUnload, true);

});

THEN:

function beforeUnload(e) {
    $('#formID input').each(function() {

        if($(this).data('original') != $(this).val()) {
            return "You have unsaved changes!";
        }

    });
}

This code will work for INPUT tags, You would have to modify it to do similar checks against textarea and select elements as needed.