关闭弹出窗口后仍然出现模态弹出背景淡入淡出 [英] Modal pop up backdrop fade in still appearing after closing the popup

问题描述

我在myscreen上有一个2弹出窗口，它将一个链接到另一个。当我点击它出现的第二个弹出窗口时，当我关闭弹出窗口时，弹出窗口内容会消失，但背景仍然存在并禁用整个页面。
html：

I have a 2 popup on myscreen which is linking one to another. when i click the 2nd popup it appears and when i close the pop up, the popup content goes off, but the backdrop still remains and disables the whole page. 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')
        });

关闭所有弹出窗口后，它看起来像在图像下方......背景仍然存在。

After closing all popups it looks like below image...the backdrop still remains.

推荐答案

当你打开modal然后在body中有一些样式添加并将div附加到body，所以你需要删除那个样式和那个div。
您好解决方案。

When you open modal then there is some style add in body and append div to body so you need to remove that style and that div. Hi have solution for that.

$(".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
});

这篇关于关闭弹出窗口后仍然出现模态弹出背景淡入淡出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！