Question

Bootstrap Modal将不会加载。应该在呈现视图后立即加载。

我使用了这种通过节段删除添加javascript的方法，以便在同一项目中加载模式形式。因此，我知道母版页中包含的jquery和bootstrap库是兼容的。我只是不知道为什么这次没有加载模式。

浏览器控制台没有抱怨

我的观点

@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选择器。缺少const data = props.data; // or you may use "const {data} = props;" <Input prefix={<Icon type="mail" style={{ color: "rgba(0,0,0,.25)" }} />} type="email" placeholder="Email" name="email" onChange={props.handleChange} value={data.email} />，无法选择ID为ReportReasonModal的元素。您当前要执行的操作是选择类型为#

的元素

<ReportReasonModal />

Bootstrap 4 Modal将不会在AspNet视图中加载

1 个答案: