Question

如果有打开的模态，我希望阻止页面重新加载。

当前，我有一个if语句，当单击按钮时，该语句将重新加载当前页面。

但是我需要它来找到模态，如果模态是打开的，则不要运行位置重载。

if (isBasket) {
    location.reload();
}

<div id="optextrasModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Optional Extras</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <ul class="optionalExtrasBasket list-unstyled col-xs-12">
                        @foreach (var OEModel in Model.OptionalExtras)
                        {
                            foreach (var x in OEModel.ProductExtras)
                            {
                        <li class="col-xs-12 col-sm-6 col-md-4 border-bottom optional-extra-row">
                            <div id="@("thank-you-" + x.ProductID)" class="optional-extra-thankyou text-center">
                                <div class="loaderBox"><img class="text-center" src="/Content/img/checked-icon.png" /></div>
                                <div class="margin-top">@x.Title</div>
                                <b>Has been added to your basket</b>
                            </div>
                            <div id="@x.ProductID" class="optional-extra-container">
                                <div class="optionalExtrasImage float-left margin-right">
                                    <a href="javascript:void(0);"><img class="img-responsive" src="@(@WebLocation.GetImageMedium(x.PrimaryImageUrl))" /></a>
                                </div>
                                <div class="optionalExtrasDetails float-right">
                                    <div class="title">@x.Title</div>
                                    <div class="price margin-top-half">@x.SalePrice.ToActiveCurrency()</div>
                                    <div class="stock-avail">@x.StockAvailabilityState</div>
                                </div>
                                <div style="display: inline-block; width: 100%;" class="margin-top">
                                    <div class="form-group">
                                        <input type="hidden" class="directProduct" id="directProduct" name="directProduct" value="@x.ProductID" />
                                        <label for="product" class="visible-xs">Button</label>
                                        <button style="width: 100%;" type="button" class="btn btn-secondary btn-block js-buynow js-optional-extra" data-href="/ajax/AddToBasket?p=@x.ProductID" value="Add to Basket" data-text="Add to Basket" data-productid="@x.ProductID" title="Add to basket" data-toggle="tooltip" data-placement="bottom">Add to Basket</button>
                                    </div>
                                </div>
                            </div>
                        </li>
                            }
                        }
                        <!-- END LI -->
                    </ul>
                </div>
            </div>
            <div class="modal-footer d-table" style="min-height: 80px !important; width: 100%;">

                    <div id="cart_total" class="vcenter text-left">
                        <span>@Html.Translate("Amount to Pay:")</span>
                        <span>@Html.Raw(Model.Basket.GetTotalCost().ToActiveCurrency())</span>
                    </div>
                <button type="button" id="secure-checkout" class="btn btn-secondary btn-lg" data-dismiss="modal">Secure Checkout</button>
            </div>
        </div>

    </div>
</div>

我认为它必须像这样写..

if ( ((isBasket)) && (!$("").hasClass("")) ) {
    location.reload();
}

任何帮助或建议都很好，

谢谢！

Answer 1

您可以检查显示是否==“阻止”。

var modal = document.getElementById("//ID of modal");


if(modal.style.display != "block")
{
    //Reload
}

Answer 2

没有提到您要使用哪个库来打开模式。如果您使用的是引导程序，则可能会帮助您：

($("element").data('bs.modal') || {})._isShown    // Bootstrap 4
($("element").data('bs.modal') || {}).isShown     // Bootstrap <= 3

如果您正在使用其他库，请参考其文档。

如果模式是开放的，则不要重新加载位置

2 个答案: