如何使 ngx-bootstrap 模态居中

Posted

技术标签:

【中文标题】如何使 ngx-bootstrap 模态居中【英文标题】：How to center an ngx-bootstrap modal 【发布时间】：2018-04-04 12:19:46 【问题描述】：

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

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

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

.modal.dialog
  top: 50%

所以至少它是垂直居中的，但这是在开发工具中，html template中没有.modal.dialogclass

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

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

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

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

更新：

@Wira Xie 回答后，当我使用 Static modal 和这个 CSS 时：

.modal-sm

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

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

【问题讨论】：

【参考方案1】：

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

this.modalRef2 = this.modalService.show(ModalContentComponent,
     
       class: 'modal-dialog-centered', initialState 
     
);

【讨论】：

HDJEMAI mrapi 我添加了这个类，它反映在带有模态对话框但没有效果的 html 中。 它对我有用，也许你的引导程序版本已经过时了？ , initialiState不应该在那里。 在此示例中不起作用：stackblitz.com/edit/ngx-bootstrap-fxafa1?file=app/… 使用引导程序 4.3.1，知道为什么吗？ 任何可以在 Bootstarp 3 或 4 中演示的 Stackblitz，我可以接受这个答案吗？ @mrapi：你能提供一个 Stackblitz 演示链接吗？【参考方案2】：

在 .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 类。

【讨论】：

非常适合我！【参考方案3】：

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

Plunker for modal

.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);

【讨论】：

class: 'modal-dialog-centered' 为什么不按照其他答案中的建议添加这个，你的方法可以在某些情况下使用吗？【参考方案4】：

您需要使用bootstrap class。

将.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);

【讨论】：

【参考方案5】：

您必须像这样为BsModalService.show() 函数传递modal-dialog-centered 引导类：

 const initialState = 
      organization: organization,
 ;

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

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

【讨论】：

这个答案有什么新东西？这只是已接受的复制粘贴！【参考方案6】：

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

const modalRef = this.modalService.open(ConfirmationDialogComponent, 
      size: dialogSize,
      centered: true 
    );

【讨论】：

【参考方案7】：

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

this.modalRef = this.modalService.show(AddDevelopersGroupComponent,
      class: 'modal-lg',
      initialState,
);

【讨论】：

【参考方案8】：

有点晚了，仅供参考。

组件中对话框的样式不起作用的原因是组件样式被隔离并仅限于组件内的元素。通过 bsmodalservice 创建的对话框在该组件之外。 （直属&lt;body&gt;）。

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

可能的解决方案是：

将此对话框的 css 移动到某个全局 (s)css 文件，而不是组件的 (s)css 不要将 bsModalService 与模板一起使用，而是在组件中使用带有 div 的 bsmodal 指令。这样组件本地 (s)css 将适用。

【讨论】：

【参考方案9】：

这也是我使用 ngx-bootstrap 的个人项目中的一个 sn-p。

.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-->

【讨论】：

点击出现错误：运行代码sn -p 可能是因为 jsfiddle 还不支持 angular typescript。我只是将.modal-sm 添加到我的css 中。 .modal-sm 可以在 &lt;div class="modal-dialog modal-sm"&gt; 找到 你可以尝试提供Plunker，我测试一下看看 我不是很熟悉 plunker 的代码，也许你可以提供你的模态 html。 这是一个质量很差的例子，a) 不工作，b) 没有显示正确的源代码，说明如何推断接近正确的答案！

以上是关于如何使 ngx-bootstrap 模态居中的主要内容，如果未能解决你的问题，请参考以下文章

可拖动的 ngx-bootstrap 模态只有身体移动和背景固定

如何使 ngx-bootstrap datepicker 只能选择和显示月份和年份？

模态框中水平垂直居的问题

让 Bootstrap 的 Carousel 既居中又响应？

使用自动布局居中模态视图

ngx-bootstrap datepicker inline 更改时不刷新 minDate/maxDate