ASP.net 核心基本模态显示不正确

Question

我一直在尝试让一个基本的模式弹出来显示，但没有任何运气。随着淡入淡出，我看到页面内容向左移动，但模式是不可见的。移除淡入淡出后，我会在整个屏幕上看到模态。我不知道为什么它在做什么。希望这里有人能看到我做错了什么。

<!-- START: Header Banner -->
<div>
    <img src="/img/default-header-img.jpg" class="img-responsive">
</div>
<!-- END: Header Banner -->
<!-- Message board area -->
<br>
<div class="container">
    <div class="strap-card strap-person">
        <h2 class="mb20">Message Board</h2>
        <p>Welcome @User.Identity.Name, Let's get started...</p>
    </div>
</div>
<!-- END: Message board -->


<div class="container">
@*Method 1*@
<div class="modal fade" id="loadingModal" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">

            <div class="modal-header">
                <h4 class="modal-title">Login</h4>
            </div>

            <div class="modal-body">
            </div>

            <div class="modal-footer">
            </div>

        </div>
    </div>
</div>
@*End Method 1*@

<div class="row">
    <div class="col-md-6">
        <div class="strap-card strap-person text-center">
            <div class="strap-card-text">
                <div id="templates">
                    <h4>Select a Template</h4>
                    <form id="frmTemplates" asp-action="return false" class="strap-form mb60">
                        <select id="selTemplates" asp-for="TemplateId" asp-items="Model.Templates" class="form-control"></select>
                        <br />
                        <button type="button" id="btnStart" name="button" value="Start" @(ViewBag.DisableRangeStart == true ? "disabled='disabled'" : "") class="btn btn-primary">Start</button> <button type="button" id="btnStop" name="button" value="Stop" class="btn btn-primary">Stop</button>

                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="strap-card strap-person text-center">
            <div class="strap-card-text">
                <div id="environment">
                    <h4>Environment Description</h4>
                    <br />
                    <span id="templateDesc">@Html.Raw(Model.TemplateDesc)</span>
                </div>
            </div>
        </div>
    </div>

</div>
</div>


@section scripts {
<script>

    $(function ()
    {

        $("#btnStart").click(function (e)
        {
            $("#loadingModal").modal();
            setTimeout(function () { $("#loadingModal").modal("hide") }, 300000);

        });


        $("#btnStop").click(function (e)
        {


        });
    });

</script>
}

我试过将模态代码放在不同的区域，但结果是一样的。我尝试将所有内容都放在 jsfiddle 中进行测试，但我不知道如何使用该站点。

Answer 1

尝试使用以下代码进行测试：

<h1>Test</h1>

<!-- START: Header Banner -->
<div>
    <img src="/img/default-header-img.jpg" class="img-responsive">
</div>
<!-- END: Header Banner -->
<!-- Message board area -->
<br>
<div class="container">
    <div class="strap-card strap-person">
        <h2 class="mb20">Message Board</h2>
        <p>Welcome @User.Identity.Name, Let's get started...</p>
    </div>
</div>
<!-- END: Message board -->


<div class="container">
    @*Method 1*@
    <div class="modal fade" id="loadingModal" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">

                <div class="modal-header">
                    <h4 class="modal-title">Login</h4>
                </div>

                <div class="modal-body">
                </div>

                <div class="modal-footer">
                </div>

            </div>
        </div>
    </div>
    @*End Method 1*@

    <div class="row">
        <div class="col-md-6">
            <div class="strap-card strap-person text-center">
                <div class="strap-card-text">
                    <div id="templates">
                        <h4>Select a Template</h4>
                        <form id="frmTemplates" asp-action="return false" class="strap-form mb60">
                            <select id="selTemplates"  class="form-control"></select>
                            <br />
                            <button type="button" id="btnStart" name="button" value="Start" @(ViewBag.DisableRangeStart == true ? "disabled='disabled'" : "") class="btn btn-primary">Start</button> <button type="button" id="btnStop" name="button" value="Stop" class="btn btn-primary">Stop</button>

                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="strap-card strap-person text-center">
                <div class="strap-card-text">
                    <div id="environment">
                        <h4>Environment Description</h4>
                        <br />
                        @*<span id="templateDesc">@Html.Raw(Model.TemplateDesc)</span>*@
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>


@section scripts {
    <!-- jQuery -->
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <!-- BS JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script>

    $(function ()
    {

        $("#btnStart").click(function (e)
        {
            $("#loadingModal").modal();
            setTimeout(function () { $("#loadingModal").modal("hide") }, 300000);

        });


        $("#btnStop").click(function (e)
        {


        });
    });

    </script>
}

ASP.net 核心基本模态显示不正确

ASP.net Core Basic Modal Does Not Show Properly

modal-dialog

asp.net-core