Bootstrap 4 Modal出现背景角2
Posted
技术标签:
【中文标题】Bootstrap 4 Modal出现背景角2【英文标题】:Bootstrap 4 Modal appearing backdrop angular2 【发布时间】: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">×</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。它将使您更容易使用给定的链接管理引导程序。无需自己管理。 【参考方案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();
【讨论】:
以上是关于Bootstrap 4 Modal出现背景角2的主要内容,如果未能解决你的问题,请参考以下文章
Bootstrap modal : 在不禁用背景控件的情况下禁用背景点击关闭
Bootstrap modal : 在不禁用背景控件的情况下禁用背景点击关闭