Handling Errors Within a Modal

Question

I have modal's that are loaded with a link (see below). Whenever there is an error loading the modal (i.e. loading the data in the modal via a wcf service call), there is just a grey screen, as if a modal is trying to open and no modal is loaded. An error is shown in chrome developer tools console which is expected

Additionally, if I click a modal link that loads properly, close that modal, and then click a modal link that generates an error, the previous modal is loaded.

How can I have it so either an error modal is loaded or so a user is redirected to the error page when an error occurs?

Layout (partial view)

<div class="container">
    <div class="row">
        <div id="modal-container" class="modal fade" tabindex="-1" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content col-sm-8 col-lg-offset-2">
                </div>
            </div>
        </div>
    </div>
</div>

// some code here...

    $(document).on('show.bs.modal', '.modal', function() {
        var zIndex = 1040 + (10 * $('.modal:visible').length);
        $(this).css('z-index', zIndex);
        setTimeout(function() {
            $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
        }, 0);
    });

        $('body').on('click', '.modal-link', function(e) {
            e.preventDefault();
            $(this).attr('data-target', '#modal-container');
            $(this).attr('data-toggle', 'modal');
        });

         // Attach listener to .modal-close-btn's so that when the button is pressed the modal dialog disappears
        $('body').on('click', '.modal-close-btn', function() {
            $('#modal-container').modal('hide');
        });
        //clear modal cache, so that new content can be loaded
        $('#modal-container').on('hidden.bs.modal', function() {
            $(this).removeData('bs.modal');