首页 文章

如何使ngx-bootstrap模态居中

提问于
浏览 次
4

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

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

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

.modal.dialog{
  top: 50%
}

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

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

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

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

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

Update:

在@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 可以隐藏它，所以当我点击模态外，它仍然可见 .

css angular centering ngx-bootstrap ngx-bootstrap-modal

5 回答

  • 1

    尝试将此属性添加到您的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); 
}
    回复于
  • 7

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

    this.modalRef2 = this.modalService.show(ModalContentComponent,
     {
       class: 'modal-dialog-centered', initialState 
     }
);
    回复于
  • 3

    你需要使用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);
  }
}
    回复于
  • 1

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

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

    你可以看到我已经在类中添加了以模态对话为中心 . 执行此操作后，您还可以修改css中以模态对话为中心的类 .

    回复于
  • -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-->
    回复于

相关问题