How to show alert for users to save the changes before closing the designer?

Use hasReportChanges to know the unsaved changes from the designer and windowbeforeunload event needs to be used for showing the alert along with unsaved changes in validation. You can find the following code sample.

<script type="text/javascript">

    var isFormSubmit = true;
    $(document).ready(function () {
        $(document.body).bind('submit', $.proxy(winformSubmit, this));
        $(window).bind('beforeunload', $.proxy(beforeWindowUnload, this));
    });

    function winformSubmit(args) {
        isFormSubmit = false;
    }

    function beforeWindowUnload(args) {

        if (isFormSubmit) {
            var designer = $('#designer').data('boldReportDesigner');
            if (designer.hasReportChanges()) {
                return 'Changes you made may not be saved';
            }
        }
        isFormSubmit = true;
    }
</script>