Bootstrap 4 Модальный внешний вид angular2

Question

Использование Bootstrap 4 в проекте angular2, в нескольких компонентах в одном компоненте. Однако мой модал появляется под серым затуханием (фон) и не редактируется.

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

пожалуйста осмотрите элемент ЗАКАНЧИВАТЬ классы, применяемые к модальным и основной корпус в вашем page, я уверен, что это потому, что модальный фон активен и застрял. вот несколько вещей, которые вы можете сделать

1) просто надстройка отклонять данные = «модальный» кнопку

2) Если модальную шкура или видимая, выцветший фон остаются и не позволяет нажать в любом месте вы могут принудительно удалить их, используя ниже код.

сначала скройте свой модальный элемент div.

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

второй удалить «модальный открыть» класс от тела и «.modal-фона» в конце страницы.

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

Answer 2

Чтобы сделать свой модальный редактируемые:

вариант 1: добавить в тег HTML вашего модальные в:

[config]="{backdrop: false}" 

вариант 2: перейти к основной (ы) файла CSS и добавить :

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

отрегулируйте z-index вашего компонента соответственно ...