ブートストラップ4モーダルの出現する背景angular2

Question

angular2プロジェクトのブートストラップ4を1つのコンポーネントの複数のコンポーネントで使用します。ただし、私のモーダルは灰色のフェード（背景）の下に表示され、編集できません。

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> 

Answer 1

要素は、あなたの中にモーダルに適用されるクラスと本体をチェック調べくださいページ、私はかなりこれはモーダルバックグラウンドがアクティブで固執しているからだと確信しています。 ここでいくつかのことは、あなたが行うことができます

1）データだけが、却下ボタン

2）モーダル非表示または可視の場合には「モーダル」=、背景が残っている色あせ追加し、どこにあなたがいずれかをクリックすることはできません。以下のコードを使って強制的に削除することができます。

最初にモーダルdiv要素を非表示にします。

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

第2に、 'modal-open'クラスを本文から削除し、 '.modal-backdrop'をページの最後に削除します。

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

Answer 2

あなたのモーダル編集可能に：

オプション1： あなたのモーダルのhtmlタグに追加する：

[config]="{backdrop: false}" 

オプション2： メイン（s）はCSSファイルに移動し、追加します：

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

コンポーネントのZインデックスを調整します。