Modal popup background disappears while still appearing after closing the popup
I have 2 popups on myscreen that link to each other. when i click the second popup and when i close the popup the popup is disabled but the background stays on and the entire page is disabled. HTML:
<div id="license-temp" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="get-license-popup">
<div class="license-heading">Get License</div>
<br>
<div class="row">
<div class="col-md-5 col-sm-4 col-xs-8">
<div class="license-description reg">What is the duration of the usage?</div>
<div class="duration">
<select id="usage-time">
<option>1 Week - $0.9</option>
<option>1 Weeks - $2.0</option>
<option>1 Month - $5.0</option>
<option>2 Months - $10.0</option>
</select>
</div>
</div>
<div class="col-md-5 col-sm-4 col-xs-8"><div class="license-description reg">What is the preferred return method?</div>
<div class="return-method">
<div><input type="radio" value="auto"> Automatic Return</div>
<div><input type="radio" value="manual"> Manual Return</div>
</div>
</div>
</div>
<table class="get-license-confirm">
<tr>
<td><!--<a href="" class="btn btn-warning confirm-my-license">GET LICENSE</button>-->
<a href="#/my-licenses" class="btn btn-warning glicense">GET LICENSE</a></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div id="license" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<!--<img class="modal-cont" src="images/license-popup.png">-->
<div class="purchase-license">
<div class="license-heading">Get License</div>
<table class="get-license-confirm">
<tr>
<td><!--<a href="" class="btn btn-warning confirm-my-license">GET LICENSE</button>-->
<a href="" class="btn btn-warning confirm-my-license">GET LICENSE</a></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div id="confirm-license" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="purchase-license">
<div class="license-heading">Confirm</div>
<table class="get-license-confirm">
<tr>
<td><a href="#/my-licenses" class="btn btn-warning buy">Confirm</a></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
code:
$(".get-me-license").click(function(){
$("#license").modal('show');
});
$(".get-me-license-tmp").click(function(){
$("#license-temp").modal('show');
});
$(".buy").click(function(){
$(".buy").modal('hide');
});
$(".confirm-my-license").click(function(){
$("#confirm-license").modal('show');
$('#license').modal('hide')
});
After closing all the popups, it looks like the image below ... the background still remains.
+3
source to share
2 answers
When you open modal then style is added to body and div is added to body, so you need to remove this style and this div. Hi I have a solution for this.
$(".get-me-license").click(function(){
$("#license").modal('show');
});
$(".get-me-license-tmp").click(function(){
$("#license-temp").modal('show');
});
$(".buy").click(function(){
$(".buy").modal('hide');
$('body').removeClass().removeAttr('style');$('.modal-backdrop').remove(); // added by me
});
$(".confirm-my-license").click(function(){
$("#confirm-license").modal('show');
$('#license').modal('hide');
$('body').removeClass().removeAttr('style');$('.modal-backdrop').remove(); // added by me
});
+5
source to share