Bootstrap 4 Modal出现背景角2答案

【问题标题】：Bootstrap 4 Modal appearing backdrop angular2Bootstrap 4 Modal出现背景角2
【发布时间】：2017-04-23 07:35:58
【问题描述】：

在 angular2 项目中使用 Bootstrap 4，在一个组件中的多个组件中但是，我的模态出现在灰色渐变（背景）下方并且不可编辑。

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>

【问题讨论】：

不确定是否有人能够在没有显示您确切代码的最小 plunker 的情况下提供帮助...
我对 angular2 一无所知，但您可以随时在此处参考nakupanda.github.io/bootstrap3-dialog。它将使您更容易使用给定的链接管理引导程序。无需自己管理。

标签： twitter-bootstrap angular bootstrap-modal bootstrap-4 ng-bootstrap

【解决方案1】：

使您的模态可编辑：

选项 1：添加到模态框的 html 标记：

[config]="{backdrop: false}"

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

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

相应地调整组件的 z-index...

【讨论】：

【解决方案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-index 并没有解决问题。仅当您使用 bootstrap 附带的标准 js 库时才会出现此问题。使用这些库的角度端口解决了这个问题。我使用了 ngx-bootsrap ，但 ng-bootstrap 也可以工作

【讨论】：

【解决方案3】：

请检查元素检查应用于页面中模态和主体的类，我很确定这是因为模态背景激活并卡住了。这里有一些你可以做的事情

1) 只需将 data-dismiss="modal" 添加到按钮

2）如果模态隐藏或可见，褪色的背景仍然存在，并且不允许您单击任何可以使用以下代码强制删除它们的位置。

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

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

其次从正文中删除“modal-open”类和页面末尾的“.modal-backdrop”。

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

【讨论】：