我在myscreen上有一个2弹出窗口,它将一个链接到另一个。当我点击它出现的第二个弹出窗口时,当我关闭弹出窗口时,弹出窗口内容会消失,但背景仍然存在并禁用整个页面。 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>
代码:
$(".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')
});
在关闭所有弹出窗口后,它看起来像在图像下方......背景仍然存在。
答案 0 :(得分:5)
当你打开modal然后在body中有一些样式添加并将div附加到body,所以你需要删除那个样式和那个div。 嗨有解决方案。
$(".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
});
答案 1 :(得分:3)
使用此代码
$('body').removeClass().removeAttr('style');$('.modal-backdrop').remove();