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>

我不知道问题出在哪里，有人能指出我正确的方向吗？

谢谢。

在移动设备上弹出模式弹出窗口

0 个答案: