Bootstrap 4模態出現的背景角2

在angular2項目中使用Bootstrap 4，在一個組件中的多個組件然而，我的模態出現在灰色淡入淡出（背景）下面，並且是不可編輯的。 Bootstrap 4模態出現的背景角2

firstComponent.html

<batopPage> 
    <button class="btn btn-success" (click)="lgModal.show()">Large modal</button> 
    <!-- Large modal --> 
    <div bsModal #lgModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> 
     <div class="modal-dialog modal-lg"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
      <button class="close" (click)="lgModal.hide()" aria-label="Close"> 
       <span aria-hidden="true">&times;</span> 
      </button> 
      <h4 class="modal-title">Large modal</h4> 
      </div> 
      <div class="modal-body"> 
      suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
      </div> 
      <div class="modal-footer"> 
      <button class="btn btn-primary confirm-btn" (click)="lgModal.hide()">Save changes</button> 
      </div> 
     </div> 
     </div> 
    </div> 
</batopPage>

firstComponent.ts

@Component({ 
    selector: 'firstcomponent', 
    template: require('./firstComponent.html') 
}) 
export class Modals { 
    @ViewChild('childModal') childModal: ModalDirective; 

    showChildModal(): void { 
    this.childModal.show(); 
    } 

    hideChildModal(): void { 
    this.childModal.hide(); 
    } 
}

otherComponent.html

<firstcomponent></firstcomponent>

來源

2016-12-08 sridharan

不確定任何人都可以在這裏沒有一個最小的笨蛋顯示你的確切代碼... –

我對angular2一無所知，但你總是可以參考http://nakupanda.github.io/bootstrap3-dialog/這裏。它將使您更容易管理給定鏈接的引導程序。無需由您自己管理它。 –

-1

請不要在檢查適用於模態元素檢查類和主體的頁面，我很確定這是因爲模態背景活躍和困難。這裏有一些事情可以做

1）只需添加數據駁回=「莫代爾」，以按鈕

2）如果模式隱藏或可見，褪色的背景依然存在，不會讓你點擊任何地方你可以通過使用下面的一段代碼強制刪除這些內容。

首先隱藏你的模態div元素。

$('modalId').modal('hide');

二，從頁面底部刪除'modal-open'類和'.modal-backdrop'。

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

來源

2017-05-10 10:46:43

爲了讓您的模態編輯：

選項1：添加到您的模態的HTML標籤：

[config]="{backdrop: false}"

選項2：去你的主（一個或多個）的CSS文件，並添加：

.modal-backdrop { 
    z-index: -1; 
}

相應地調整您的組件的z-index ...

來源

2017-05-10 13:12:11

Bootstrap 4模態出現的背景角2

回答

相關問題