Bootstrap 4 Modal не будет загружаться в AspNet View

Question

Bootstrap Modal не загружается.Он должен загрузиться, как только представление будет визуализировано.

Я использовал этот метод добавления javascript через объявление раздела, чтобы загрузить модальную форму в том же проекте.Итак, я знаю, что библиотеки jquery и bootstrap, включенные в главные страницы, совместимы.Я просто не могу понять, почему на этот раз модал не загружается.

Консоль браузера ни на что не жалуется

My View

@using CaptchaMvc.HtmlHelpers
@{
    ViewBag.Title = "Report Post";
}



<div class="modal fade" id="ReportReasonModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-notify modal-warning" role="document">
    <div class="modal-content">
        <div class="modal-header text-center" style="background-color:saddlebrown; color:white;">
            <h4 class="modal-title white-text w-100 font-weight-bold py-2">Report Posting</h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">×</span>
            </button>
        </div>
        <form method="post" action="/Items/Process Report">
            <div class="modal-body">
                @Html.ValidationSummary("", new { @class = "text-danger" })
            </div>
            <div class="modal-footer">
                @*  @Html.Captcha("Refresh", "Please Enter Captcha Value Below", 7, "Is required field.", false)*@
                <button value="submit" type="submit" class="btn btn-outline-danger">Submit</button>

            </div>
        </form>
    </div>
    </div>
</div>
@section scripts
{
<script>
    $(function () {
        $("ReportReasonModal").modal();
        alert("here")
    });
</script>

}

Порядок загрузки javascript: выдержка из отрисованной мастер-страницы с отрисовкой секции сценариев

<!-- jQuery library -->
<script src="/Scripts/jquery-3.3.1.js"></script>
<!-- Popper -->
<script src="/Scripts/umd/popper.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery-ui-1.12.1.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/mdb/mdb.js"></script>
<script>
    $(function () {
        $("ReportReasonModal").modal();
        alert("here")
    });
</script>

Модал должен появиться, как только представление будет обработано

Answer 1

Вы не используете правильный селектор jQuery.# отсутствует, чтобы выбрать элемент с идентификатором ReportReasonModal.В данный момент вы пытаетесь выбрать элемент типа <ReportReasonModal />

$("#ReportReasonModal").modal();