Модальное всплывающее окно на мобильном телефоне

Question

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

На рабочем столе это работает без каких-либо проблем, независимо от размера окна, однако когда дело доходит до У меня возникают проблемы, когда сам модал отображается только в части сайта, как показано ниже:

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

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

Мой код ниже:

JS

$(document).ready(function () {
    $("#Edit-Account").on("click", function () {
        $("#account-form").appendTo("body").modal();
    });

    $('#Cancel-Edit-Account').click(function () {
        $("#account-form").modal("hide");
    });
});

Частичное представление (с модальным)

<div class="account-section" id="account">
    <div class="account-section-info account">
        <div class="row">
            <div class="col-xs-9">
                <h2>Account</h2>
            </div>
            <div class="col-xs-3">
                <button class="btn btn-secondary-bordered btn-full" id="Edit-Account">Edit</button>
            </div>
        </div>
        <div>
            <div class="row">
                <div class="col-xs-12">
                    <strong>Company Name:</strong> @Html.DisplayFor(model => model.CompanyName)
                </div>
            </div>
            <div class="row">
                <div class="col-xs-2 col-sm-3 col-md-2">
                    <strong>Address:</strong>
                </div>
                <div class="col-xs-9">
                    @Html.DisplayFor(model => model.Address1)<br />
                    @Html.DisplayFor(model => model.PostTown) <br/>
                    @Html.DisplayFor(model => model.County) <br/>
                    @Html.DisplayFor(model => model.Postcode)
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <strong>Website:</strong> @Html.DisplayFor(model => model.Website)
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <strong>FCA Number:</strong> @Html.DisplayFor(model => model.FcaNumber)
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <strong>Data Protection Reg Number:</strong> @Html.DisplayFor(model => model.DpRegNo)
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <strong>Network:</strong> @Html.DisplayFor(model => model.NetworkName)
                </div>
            </div>
        </div>
    </div>
</div>

<div id="account-form" class="modal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="account">
                <div class="row">
                    <div class="col-xs-9">
                        <h2>Account</h2>
                    </div>
                    <div class="col-xs-3">
                        <button class="btn btn-secondary btn-full" id="Cancel-Edit-Account">Cancel</button>
                    </div>
                </div>
                <form id="account-data">
                    <div class="row">
                        <div class="col-xs-12">
                            @Html.LabelFor(model => model.CompanyName)
                            @Html.TextBoxFor(model => model.CompanyName)
                            @Html.ValidationMessageFor(model => model.CompanyName)
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12">
                            @Html.LabelFor(model => model.Postcode)
                            @Html.TextBoxFor(model => model.Postcode)
                            @Html.ValidationMessageFor(model => model.Postcode)
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                            <button type="button" class="btn btn-primary btn-full" id="LookupAddress" title="Click to Lookup Address">LOOKUP</button>
                        </div>
                        <div class="col-sm-6">
                            <button type="button" class="btn btn-secondary btn-full" id="EnterAddress" title="Click to Enter Address">ENTER MANUALLY</button>
                        </div>
                    </div>
                    <div id="AddressLookup" class="hidden"></div>
                    <div id="AddressManual" class="hidden">
                        <div class="row hidden" id="AddressWarning">
                            <div class="col-xs-12">
                                <p>We haven't been able to find your address, please enter it manually</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-12 col-sm-4">
                                @Html.LabelFor(model => model.Address1)
                                @Html.TextBoxFor(model => model.Address1)
                                @Html.ValidationMessageFor(model => model.Address1)
                            </div>
                            <div class="col-xs-12 col-sm-4">
                                @Html.LabelFor(model => model.Address2)
                                @Html.TextBoxFor(model => model.Address2)
                                @Html.ValidationMessageFor(model => model.Address2)
                            </div>
                            <div class="col-xs-12 col-sm-4">
                                @Html.LabelFor(model => model.Address3)
                                @Html.TextBoxFor(model => model.Address3)
                                @Html.ValidationMessageFor(model => model.Address3)
                            </div>
                            <div class="col-xs-12 col-sm-4">
                                @Html.LabelFor(model => model.PostTown)
                                @Html.TextBoxFor(model => model.PostTown)
                                @Html.ValidationMessageFor(model => model.PostTown)
                            </div>
                            <div class="col-xs-12 col-sm-4">
                                @Html.LabelFor(model => model.County)
                                @Html.TextBoxFor(model => model.County)
                                @Html.ValidationMessageFor(model => model.County)
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12 col-sm-6">
                            @Html.LabelFor(model => model.FcaNumber)
                            @Html.TextBoxFor(model => model.FcaNumber)
                            @Html.ValidationMessageFor(model => model.FcaNumber)
                        </div>
                        <div class="col-xs-12 col-sm-6">
                            @Html.LabelFor(model => model.DpRegNo)
                            @Html.TextBoxFor(model => model.DpRegNo)
                            @Html.ValidationMessageFor(model => model.DpRegNo)
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12">
                            @Html.LabelFor(model => model.Website)
                            @Html.TextBoxFor(model => model.Website)
                            @Html.ValidationMessageFor(model => model.Website)
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12">
                            @Html.LabelFor(model => model.NetworkName)
                            @Html.DropDownListFor(model => model.NetworkName, ViewBag.NetworkClubList as SelectList, new {id = "NetworkName"})
                            @Html.ValidationMessageFor(model => model.NetworkName)
                        </div>
                    </div>
                    <div id="OtherNetwork" class="row hidden">
                        <div class="col-xs-12">
                            @Html.LabelFor(model => model.NetworkNameOther)
                            @Html.TextBoxFor(model => model.NetworkNameOther)
                            @Html.ValidationMessageFor(model => model.NetworkNameOther)
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-4 col-sm-offset-4">
                            <button type="button" class="btn btn-submit btn-full" id="UpdateAccount">UPDATE</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

Понятия не имею, что Вопрос в том, может ли кто-нибудь указать мне правильное направление?

Заранее спасибо.