首页 > 解决方案 > 如何改进模式弹出窗口

问题描述

我希望在出现错误消息后出现这种类型的窗口。

在此处输入图像描述

这是我的结果

在此处输入图像描述

请问我怎样才能得到相同的结果?

<!-- Modal -->
<ng-template #mymodal let-modal>
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">Error message</h4>
    <button type="button" class="close" aria-label="Close button" aria-describedby="modal-title" (click)="modal.dismiss('Cross click')">
     <span aria-hidden="true">&times;</span>
   </button>
  </div>

  <div class="table-responsive">
    <table class="table table-striped">
      <thead>
      </thead>
      <tbody>
        <td>This is a text</td>
      </tbody>
    </table>
  </div>


  <div class="modal-footer">
    <button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">Ok</button>
  </div>
</ng-template>

https://stackblitz.com/edit/angular-ivy-kr7cyd?file=src/app/app.component.html

标签: angularbootstrap-4

解决方案


删除.modal-footer将实现这一目标..

<div class="modal-footer">
  <button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">Ok</button>
</div>

推荐阅读