關閉彈出窗口后仍然出現模態彈出背景淡入淡出

Question

我在myscreen上有一個彈出窗口，它將一個鏈接到另一個。 當我點擊它出現的第二個彈出窗口時，當我關閉彈出窗口時，彈出窗口內容會消失，但背景仍然存在並禁用整個頁面。 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')
        });

關閉所有彈出窗口后，它看起來像下面的圖像......背景仍然存在。

Answer 1

當你打開模態然后在主體中添加一些樣式並將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
});

Answer 2

使用此代碼

$('body').removeClass().removeAttr('style');$('.modal-backdrop').remove();