Bootstrap模式弹出窗口背景屏幕不会关闭

我正在使用Bootstrap & AngularJS来构建一个应用程序。我正在使用内容的引导模式弹出窗口。其他页面正在加载到ng-view中。 ng-view的内容有模态弹出框，当我得到模态弹出框，当我点击链接到下一页的按钮时，我能够看到后面的页面，但模态弹出的背景黑色不透明屏幕仍然会那里。我怎样才能摆脱这一点？但是当我单独运行这些页面时，我不会遇到这样的问题。Bootstrap模式弹出窗口背景屏幕不会关闭

代码：

<div id="regular-service" class="modal fade"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-body"> 
        <!--<img class="modal-cont" src="images/popup.png">--> 

        <div class="data-extract-popup"> 
         <div class="data-extract-heading">How do you want to use this data?</div> 
         <table class="data-extract-table"> 
         <tr> 
          <td><a href="#/clean-data" class="btn btn-lg btn-warning">CLEAN DATA</a></td> 
          <td><a href="#/raw-data" class="btn btn-lg btn-warning">RAW DATA</a></td> 
         </tr> 
         <tr> 
          <td>Cleaned up for your use.May have some missing pieces.</td> 
          <td>All pieces of data are intact here.</td> 
         </tr> 
         </table> 
        </div> 
       </div> 
       </div>     
      </div> 
     </div>

模态：

$(".regular").click(function(){ 
    $("#regular-service").modal('show'); 
    });

下面是它的外观。弹出

enter image description here

之前弹出后：

enter image description here

仍然弹出背景保持相同

来源

2015-05-25 Mithun Raikar

请添加您的代码。 – Zee

@Zee添加代码。 –

它是一种模式的一般行为，当它打开它的背景变得迟钝并淡出。你可以选择不淡出，但在这种情况下，背景总是不活动。为NOT淡出的方法是：

$(".regular").click(function(){ 
    $("#regular-service").modal({backdrop: "false"}); 
    });

简单捣鼓这个http://jsfiddle.net/bgutxt3y/。尝试打开模式使用按钮“打开模式@getbootstrap”。这小提琴使用HTML按钮调用模态

来源

2015-05-25 07:18:46

尝试这个例子的HTML中使用

data-backdrop="false"

设定背景为假......

$('.launchConfirm').on('click', function (e) { 
 
    $('#confirm') 
 
     .modal({ backdrop: 'static', keyboard: false }) 
 
     .one('click', '[data-value]', function (e) { 
 
      if($(this).data('value')) { 
 
       alert('confirmed'); 
 
      } else { 
 
       alert('canceled'); 
 
      } 
 
     }); 
 
});

body, 
 
.modal-open .page-container, 
 
.modal-open .page-container .navbar-fixed-top, 
 
.modal-open .modal-container { 
 
\t overflow-y: scroll; 
 
} 
 

 
@media (max-width: 979px) { 
 
\t .modal-open .page-container .navbar-fixed-top{ 
 
\t \t overflow-y: visible; 
 
\t } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet"/> 
 
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet"/> 
 
<link href="http://jschr.github.io/bootstrap-modal/css/bootstrap-modal.css" rel="stylesheet"/> 
 
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script> 
 
<script src="http://jschr.github.io/bootstrap-modal/js/bootstrap-modal.js"></script> 
 
<script src="http://jschr.github.io/bootstrap-modal/js/bootstrap-modalmanager.js"></script> 
 

 

 

 
<div class="page-container"> 
 
    <div class="container"> 
 
     <br /> 
 
     <button class="btn launchConfirm">Launch Confirm</button> 
 
    </div> 
 
</div> 
 

 
<div id="confirm" class="modal hide fade"> 
 
    <div class="modal-body"> 
 
    Do you want to continue? 
 
    </div> 
 
    <div class="modal-footer"> 
 
    <button type="button" data-dismiss="modal" class="btn btn-primary" data-value="1">Continue</button> 
 
    <button type="button" data-dismiss="modal" class="btn" data-value="0">Cancel</button> 
 
    </div> 
 
</div>

来源

2015-05-25 07:32:16

我已经经历这个问题，很难找到一个解决方案，经过大量的搜索，我发现这种方法来隐藏背景与jquery $（'。modal-backdrop'）。hide（）;

如果你改变你的状态，你必须打开模式，该模式会消失，但背景会在那里，你不会在任何地方点击屏幕上，我设法解决这个问题，使用的jQuery方法对角的.RUN funtion这样的：

angular.run(function($rootScope) { 
     $rootScope.$on('$routeChangeStart', destroyTheBackdrop); 

     function destroyTheBackdrop() { 
     $('.modal-backdrop').hide(); 
     } 
    });

这会叫你改变路线的方法，每次，并没有更多的鬼背景。如果您使用的是ui-router，请使用'$ stateChangeStart'而不是'$ routeChangeStart'。

来源

2017-01-09 12:03:48

$（'。modal-backdrop'）。hide（）;有用！ – Jasmeen

Bootstrap模式弹出窗口背景屏幕不会关闭

回答

相关问题