Bootstrap 4 Модальный фон angular2

Использование 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>

angular twitter-bootstrap bootstrap-modal bootstrap-4 ng-bootstrap
person sridharan    schedule 08.12.2016    source источник
comment
Не уверен, что кто-то сможет помочь здесь без минимального плунжера, показывающего ваш точный код...   -  person pkozlowski.opensource    schedule 08.12.2016
comment
Я ничего не знаю об angular2, но вы всегда можете обратиться к nakupanda.github.io/bootstrap3-dialog< /а> здесь. это значительно облегчит вам управление начальной загрузкой по данной ссылке. Нет необходимости управлять им самостоятельно.   -  person Shalin Patel    schedule 15.12.2016

Ответы (3)


arrow_upward
2
arrow_downward

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

вариант 1: добавьте в html-тег вашего модального окна:

[config]="{backdrop: false}"

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

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

соответствующим образом отрегулируйте z-индекс вашего компонента...

person Cruz Jurado    schedule 10.05.2017

arrow_upward
0
arrow_downward

Я знаю, что это старая проблема, но у меня была аналогичная проблема с Angular 5, bootstrap 4, и эта проблема занимала довольно высокое место в моих поисковых запросах Google.

У меня возникла эта проблема, когда я добавил анимацию в компонент, содержащий модальное окно.

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

export const menuAnimation =    trigger('MenuSlideInOut', [
  state('in', style({
    transform: 'translate3d(210px, 0, 0)'
  })),
  state('out', style({
    transform: 'translate3d(0%, 0, 0)'
  })),
  transition('in => out', animate('400ms 0.1s ease-in-out')),
  transition('out => in', animate('400ms 0.1s ease-in-out'))
])

Кажется, что любое движение компонента, содержащего модальное окно, сломает модальное окно.

Ручная настройка z-index не решила проблему. Эта проблема возникает только при использовании стандартных библиотек js, поставляемых с загрузчиком. Использование углового порта этих библиотек решает проблему. Я использовал ngx-bootsrap , но ng-bootstrap также может работать

person ZaZep    schedule 15.03.2018

arrow_upward
-1
arrow_downward

пожалуйста, проверьте классы проверки элемента, применяемые к модальному и основному телу на вашей странице, я почти уверен, что это связано с тем, что модальный фон активен и застрял. вот несколько вещей, которые вы можете сделать

1) просто добавьте data-dismiss="modal" к кнопке

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

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

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

во-вторых, удалите класс «modal-open» из тела и «.modal-backdrop» в конце страницы.

$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
person this.girish    schedule 10.05.2017