16

尝试使用这样的 CSS 将这个ngx-boostrap 模式居中，但它不起作用：

.modal.fade.in{
  display: flex;
  justify-content: center;
  align-items: center;
}

但是在开发工具中，我可以像这样添加 CSS：

.modal.dialog{
  top: 50%
}

所以至少它是垂直居中的，但这是在开发工具中，并且在html模板.modal.dialog中没有类

有没有办法将 ngx-bootstrap 模式正确居中？

我想创建一个通用模态组件以在任何地方使用它，方法是提供输入消息并添加一个是/否对话框并输出用户选择（使用 EventEmitter）

我在以下Plunker中找到了一个示例，但无法在单独的自定义组件中重现它。

plunker 示例来自这个网站：https ://github.com/valor-software/ngx-bootstrap/issues/2334

更新：

在@Wira Xie 回答之后，当我使用静态模式和这个 CSS 时：

.modal-sm
{
  top: 50%;
  left: 50%;
  width:30em;
  height:18em;
  background-color: rgba(0,0,0,0.5); 
}

模态显示居中，但只有Esc key可以隐藏它，所以当我在模态外部单击时，它仍然可见。

4

9 回答 9

31

为什么不使用引导modal-dialog-centered类： 

this.modalRef2 = this.modalService.show(ModalContentComponent,
     {
       class: 'modal-dialog-centered', initialState 
     }
);
于 2018-07-02T16:19:03.503 回答
12

在 .ts 文件中，您有这样的代码（打开模式弹出窗口）...

private showModal(template: TemplateRef<any>): BsModalRef {
    return this.modalService.show(
      template,
      { class: 'modal-lg modal-dialog-centered',
        ignoreBackdropClick: true, 
        keyboard: false
      });
}

你可以看到我在课堂上添加了 modal-dialog-centered 。完成此操作后，您还可以修改 CSS 中的 modal-dialog-centered 类。

于 2019-01-18T05:50:18.153 回答
8

尝试将此属性添加到您的 CSS:vertical-align: middle到您的.modal.dialog类

模态的 Plunker

.modal.fade {
    display: flex !important;
    justify-content: center;
    align-items: center;
}
.modal-dialog {
    vertical-align:middle;
    height:18em;
    background-color: rgba(0,0,0,0.5); 
}
于 2017-10-24T17:21:06.187 回答
5

您需要使用引导类。

添加.modal-dialog-centered到.modal-dialog垂直居中模式。

import { Component, OnInit, TemplateRef } from '@angular/core';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';

@Component({
...
})
export class ModalComponent {
  modalRef: BsModalRef;

  // Here we add another class to our (.modal.dialog)
  // and we need to pass this config when open our modal
  config = {
    class: 'modal-dialog-centered'
  }

  constructor(private modalService: BsModalService) { }

  openModal(template: TemplateRef<any>) {
    // pass the config as second param
    this.modalRef = this.modalService.show(template, this.config);
  }
}
于 2018-10-03T13:04:22.987 回答
1

您必须为函数传递modal-dialog-centered引导类，如下所示：BsModalService.show()

 const initialState = {
      organization: organization,
 };

 this.modalRef = this.modalService.show(AdminOrganizationCreateComponent, {
      class: 'modal-dialog-centered', initialState 
 });

注意：如果您需要传递初始数据，您可以使用initalState对象传递它。

于 2020-10-29T04:24:53.790 回答
0

根据文档，您可以通过将 centered 属性设置为 true 来垂直居中模式（因为默认情况下为 false）

const modalRef = this.modalService.open(ConfirmationDialogComponent, {
      size: dialogSize,
      centered: true 
    });
于 2019-04-21T19:17:28.143 回答
0

我已经mat-step在模态中添加了，因此它没有为modal-dialog-centered引导类以太居中对齐。但是modal-lg上课对我有用。示例代码与接受的答案非常相似。仅更改传递给模态的引导类。

this.modalRef = this.modalService.show(AddDevelopersGroupComponent,{
      class: 'modal-lg',
      initialState,
});
于 2020-11-04T13:38:59.930 回答
0

有点晚了，仅供参考。

组件中对话框的样式不起作用的原因是组件样式被隔离并限制在组件内的元素中。通过 bsmodalservice 创建的对话框在该组件之外。（直接在 下<body>）。

因此，虽然您的样式被封装在组件和一些随机标识符中，但对话框本身却不是。最终的 css (like mycomponent[_ngcontent_bla_323] .modal) 不适用于服务添加的 div.modal。

可能的解决方案是：

  • 将此对话框的 css 移动到某个全局 (s)css 文件，而不是组件的 (s)css
  • 不要将 bsModalService 与模板一起使用，而是在组件中使用带有 div 的 bsmodal 指令。这样组件本地 (s)css 将适用。
于 2021-05-10T20:24:02.040 回答
-1

这也是我使用 ngx-bootstrap 的个人项目的一个片段。

.modal-sm
{
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; 
    margin-left: -15em; 
    background-color: #001b00; 
    /*position:fixed;*/
}
<!--typecript files-->
<script>
//here is the typesciprt file
export class AppComponent 
{ 
    //for default ngx-bootstrap modal
    public modalRef: BsModalRef;
    constructor(private modalService: BsModalService) {}

    public openModal(template: TemplateRef<any>) {
      this.modalRef = this.modalService.show(template);
    }
}
</script>
<!--end of ts file-->

<!--Modal-->
<div class="container">
    <div bsModal #smModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title pull-left">Small modal</h4>
              <button type="button" class="close pull-right" aria-label="Close" (click)="smModal.hide()">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              
            </div>
          </div>
        </div>
      </div>
<!--enf of modal-->

于 2017-10-24T02:17:50.243 回答