当点击后退按钮时，出现弹出窗口后，它会重定向到后退页面，但无法点击任何内容。 （移动应用）

Question

出现弹窗后点击后退按钮时，跳转至后页，但无法点击任何内容。我认为这是因为，当 pop 出现时背景淡入淡出，在重定向到后页时仍然处于活动状态，因此页面处于非活动状态。这是后退按钮的代码，

document.addEventListener("backbutton", onBackKeyDown, true);

function onBackKeyDown()
{
    var locate=document.location.href.match(/[^\/]+$/)[0];
    if(locate=="Home")
    {
        resp = confirm("Do you want to exit the app?");
        if (resp === true)
        {
            navigator.app.exitApp();
        }
    }

    else
    {
        menuopenchk();
        location.href="#Home";
    }
}

这是弹出的添加项，

     <!-- =================ADD Item Popup================ -->

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


   <div class="modal-content">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;
     </button>
    <h4 class="modal-title homelogintitle" translate="ADD-ITEM">ADD ITEMS</h4>
  </div>

    <form id="add-item" novalidate="novalidate">
        <!--  -->
        <div class="modal-body" align="center">
            <div style="margin:10px;" class="additemdiv">
                <div class="additemdiv2" style="width:40%;">
                    <label for="Itemtype" class="labl-add" translate="ITEM-TYPE">Item Type: </label>
                </div>
                <div class="additemdiv2" style="width:60%;">
                    <select name="Itemtype" ng-model="Itemtype" id="itemtype"
                            ng-change="itemnamefetch(Itemtype);" class="form-control homelogin-input1 additemselect"
                            style="width:100%;height:30px; padding:0px;">
                        <option value="" selected translate="SELECT">-Select-</option>
                        <option data-ng-repeat="a in item1 track by $index" value="{{a.ItemID}}">{{a.ItemName}}</option>
                    </select>
                </div>
                <div style="clear:both;"></div>
            </div>

            <div style="margin:10px;" class="additemdiv">
                <div style="width: 40%;" class="additemdiv2">
                    <label for="Itemname" class="labl-add" translate="SUB-ITEM">Sub Item: </label>
                </div>
                <div class="additemdiv2" style="width:60%;">
                    <select name="Itemname" ng-model="Itemname" id="Itemname"
                            ng-change="unitfetch(Itemname);" class="form-control homelogin-input1 additemselect"
                            style="width: 100%; height: 30px; padding: 0px;">
                        <option value="" selected translate="SELECT">-Select-</option>
                        <option data-ng-repeat="b in itemname1 track by $index" value="{{b.SubItemID}}">{{b.SubItemName}}</option>
                    </select>
                </div>
                <div style="clear:both;"></div>
            </div>

            <div style="margin:10px;" class="additemdiv">
                <div style="width: 40%;" class="additemdiv2">
                    <label for="unit" class="labl-add" translate="UNIT">Unit: </label>
                </div>
                <div class="additemdiv2" style="width:60%;">
                    <input type="text" ng-model="unit" id="unit" name="unit"
                           class="form-control homelogin-input1 additemtext" placeholder="{{'UNIT' | translate}}" style="width: 100%; height: 30px;">
                </div>
                <div style="clear:both;"></div>
            </div>

            <div style="margin:10px;" class="additemdiv">
                <div style="width: 40%;" class="additemdiv2">
                    <label for="price" class="labl-add" translate="PRICE">Price:</label>
                </div>
                <div class="additemdiv2" style="width:60%;">
                    <input type="text" ng-model="price" id="price" name="price"
                           class="form-control homelogin-input1 additemtext" placeholder="{{'PRICE' | translate}}"
                           disabled style="width: 100%; height: 30px; padding: 0px;">  <!-- value="{{price}}" -->
                </div>
                <div style="clear:both;"></div>
            </div>

            <div style="margin:10px;" class="additemdiv">
                <div style="width: 40%;" class="additemdiv2">
                    <label for="quantity" class="labl-add" translate="QUANTITY">Quantity: </label>
                </div>
                <div class="additemdiv2" style="width:60%;">
                    <input type="number" ng-model="quantity" name="quantity" id="quantity"
                           ng-keyup="totalfunc(price,quantity);" class="form-control homelogin-input1 additemtext" placeholder="{{'QUANTITY' | translate}}"
                           disabled style="width: 100%; height: 30px; padding: 0px;">  <!-- value="{{price}}" -->
                </div>
                <div style="clear:both;"></div>
            </div>

            <div style="margin:10px;" class="additemdiv">
                <div style="width: 40%;" class="additemdiv2">
                    <label for="total" class="labl-add" translate="ITEM-TOTAL">Total: </label>
                </div>
                <div class="additemdiv2" style="width:60%;">
                    <input type="number" ng-model="total" name="total" id="total"
                           class="form-control homelogin-input1 additemtext" placeholder="{{'ITEM-TOTAL' | translate}}"
                           disabled style="width: 100%; height: 30px; padding: 0px;"><!-- {{price*quantity}} -->
                </div>
                <div style="clear:both;"></div>
            </div>

            <table style="width:100%;" class="dyanamictable">
                <tbody>
                    <input type="hidden" value="{{price1}}" ng-model="price1" id="priceid"><!-- item ID -->
                    <input type="hidden" value="{{price2}}" ng-model="price2" id="priceid1"><!-- ItemName -->
                    <input type="hidden" value="{{price3}}" ng-model="price3" id="priceid2"><!-- Subitem Name -->
                    <input type="hidden" value="{{action}}" ng-model="action" id="action"><!-- Action -->
                    <input type="hidden" value="{{operation}}" ng-model="operation" id="operation"><!-- Operation -->
                    <input type="hidden" value="{{modify}}" ng-model="modify" id="modify"><!-- modify -->

                </tbody>
            </table>
        </div>
        <div class="modal-footer">
            <!--  <div class="row">
             <div class="col-md-3 col-sm-3 col-xs-3 col-md-offset-8 col-sm-offset-8 col-xs-offset-8"> -->
            <div align="center">
                <input type="submit" name="submit" value="{{'ADD-ITEM-BUT' | translate}}" class="btn btn-success" />    <!-- ng-click="addoitem(Itemtype,Itemname,price2,price3,unit,price,quantity,total,price1);" -->


            </div>
            <!-- </div> -->
            <!-- <div class="col-md-3 col-sm-3 col-xs-3 col-md-offset-2 col-sm-offset-2 col-xs-offset-2">
        <button type="button" class="btn btn-default btn-success" data-dismiss="modal">Cancel</button>
        </div> -->
            <!-- </div> -->
        </div>
    </form>
    </div>

   </div>
  </div> 
  <!-- =================////ADD Item Popup================ -->

ADDItem pop 在 bookevent 页面上，点击后退按钮它重定向到 home 页面，但无法单击任何内容。请帮我解决这个问题...

Answer 1

在 else 块中添加 $('.modal-backdrop').remove();。它应该可以工作。

如果您不使用jquery，请使用

document.getElementsByClassName("modal-backdrop").remove ();