When clicking back button after a pop up appears, it redirects to the back page but cannot click anything. I think this is because, the background fade in effect when pop appears, is still active on redirecting to the back page, hence the page is inactive. This is the code for backbutton,
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";
}
}
This is the add item pop up,
<!-- =================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">×
</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 is on the bookevent page, and on clickin back button it redirects to home page but cannot click anything. Please help me solve this issue...
Add $('.modal-backdrop').remove(); inside else block. It should work.
If you are not using jquery use
document.getElementsByClassName("modal-backdrop").remove ();