关闭弹出窗口后，模态弹出背景淡入仍然出现答案

【问题标题】：Modal pop up backdrop fade in still appearing after closing the popup关闭弹出窗口后，模态弹出背景淡入仍然出现
【发布时间】：2015-08-08 01:42:12
【问题描述】：

我的屏幕上有一个 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')
        });

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

【问题讨论】：

你能发个 jsfiddle 吗？
@Ajai，对不起，伙计...不幸的是，对该代码有很多依赖。所以如果我把它的一部分。它可能会起作用。
@MithunRaikar：我试图在这篇文章中解决你的问题。请检查一下，如果它工作正常，请告诉我。
@JaiminSoni 非常感谢朋友。
@MithunRaikar：很高兴。继续努力吧。继续编码。祝编码愉快！！！

标签： javascript css twitter-bootstrap

【解决方案1】：

当您打开模式时，会在正文中添加一些样式并将 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');
      $('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
});

【讨论】：

【解决方案2】：

使用此代码

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

【讨论】：