Problem when displaying modal bootstrap

Question

I am trying to display a modal of bootstrap to the client, with an error message, my code is as follows:

@if (!string.IsNullOrWhiteSpace(Model.ErrorMessage))
{
    <script>
        $('#modalError').modal('show');
    </script>

}



<div id="modalError" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <p>@Model.ErrorMessage.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
}

But this error message appears: "The object does not support 'modal' property or method'"

The jquery file is usually referenced on the page.

Answer 1

Is this missing in the modal call:

$(document).ready(function(){