Bootstrap模式显示错误的格式

Question

我试图在我的asp.net应用程序中使用bootstrap模式，但它显示不正确。

引导程序：

    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />

<div class="modal fade" id="defaultErrors" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button aria-hidden="true" data-dismiss="modal" class="close" type="button">X</button>
                    <h4 id="myModalLabel1" class="modal-title"><strong>Error!</strong></h4>
                </div>
                <div class="modal-body">
                    <div class="alert alert-danger fade in">
                        <p id="msgError"></p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
                </div>
            </div>
        </div>
    </div>

我用JQuery调用它：

$("#msgError").html("Error custom message.");
    $("#defaultErrors").modal();

结果是丑陋的模态：

我正在使用bootstrap bootstrap 3.3.7