引导4模态出现背景angular2

Question

第一部分。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>

第一部分。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();
  }
}

其他Component.html

<firstcomponent></firstcomponent>

Answer 1

请检查你们页面中应用于模态和主体的元素签出类，我很确定这是因为模态背景是活跃的和呆滞的。这里有几件事你可以做

1） 只需在按钮中添加data dismission=“modal”

2） 如果模式隐藏或可见，则会保留褪色的背景，不允许您单击任何可以使用下面的代码强制删除这些背景的位置。

首先隐藏你的模态div元素。

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

其次，从body中删除“modal open”类，并删除“modal open”。页面末尾的“模态背景”。

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

Answer 2

我知道这是一个老问题，但我在Angular 5，bootstrap 4上也有类似的问题，这个问题在我的谷歌搜索中排名很高。

当我向包含模态的组件添加动画时，我开始遇到这个问题。

我的项目中有一段令人不快的代码是：

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索引无法解决此问题。只有在使用bootstrap附带的标准js库时，才会出现此问题。使用这些库的角度端口可以解决这个问题。我使用了ngx引导RAP，但ng引导也可以工作

Answer 3

要使模态可编辑，请执行以下操作：

选项1：添加到你的modal的html标签：

[config]="{backdrop: false}"

选项2：转到您的主（s）css文件并添加：

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

相应地调整组件的z索引。。。