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

时间:2015-05-26 11:44:28

标签: javascript css twitter-bootstrap

我在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')
        });

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

enter image description here

2 个答案:

答案 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();