单击后退按钮时，在出现弹出窗口后，它会重定向到后页，但无法单击任何内容.(移动应用程序)

Question

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

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================ -->

ADDItempop 位于图书活动页面上，单击后退按钮时，它会重定向到主页，但无法单击任何内容。请帮我解决这个问题...

Answer 1

在 else 块中添加$('.modal-backdrop').remove();。它应该有效。

如果您不使用 jquery 使用

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