Базовый модал ASP.net не отображается должным образом - PullRequest
Новая
       12

Базовый модал ASP.net не отображается должным образом

0 голосов
/ 19 сентября 2019

Я пытался заставить показать модальное всплывающее окно, но безуспешно.С исчезновением я вижу, что содержимое страницы сдвигается влево, но модальный невидим.Когда исчезает исчезновение, я вижу модальное изображение по всему экрану.Я понятия не имею, почему он делает то, что делает.Надеюсь, кто-то здесь увидит, что я делаю не так. 

<!-- 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 для тестирования, но я не знаю, как использовать этот сайт.

1 Ответ

1 голос
/ 20 сентября 2019

Попробуйте сделать тест с кодом ниже: 

<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>
}
...