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模式彈出窗口背景屏幕不會關閉

回答

相關問題