1. Results the following

Stackblitz.com/edit/base-d…

Click the button, there is a popover, behind the cover layer, popover content can be customized

  1. Open a brand new Angular project and execute the Create component commandng g c --name base-dialogYou get three initialized files

  1. Start with a cover layer, a div that covers the entire screenbase-dialog.component.html
<div class="modal-overlay" *ngIf="visible"></div>
Copy the code

The corresponding style version, dialog.component.scss

.overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 1200; Background: rgba(0, 0, 0, 0.3); touch-action: none; /* Do not trigger any events */ -ms-touch-action: none; }Copy the code

Effect: Cover the entire screen

By default, the masking layer is not displayed

  @Input() dialogTitle = ' '; /* * Show/hide * */ _visible =false;
  constructor() {}ngOnInit() {}show() {
    this._visible = true;
  }

  close() {
    this._visible = false;
  }
Copy the code
  1. Make the popover Dialog area
<div class="overlay"></div>
<div class="dialog-container">
  <div class="dialog-content">
    <div class="dialog-header">{{dialogTitle}}</div>
    <div class="dialog-body">
      <ng-content select=".dialog-body"></ng-content>
    </div>
    <div class="dialog-footer">
      <ng-content select=".dialog-footer"></ng-content>
    </div>
  </div>
</div>
Copy the code

Add the style

.overlay{... }.dialog-container {
  position: fixed;
  z-index: 1300;
  left: 50%;
  top: 50%;
  background-color: #fff;
  .dialog-content {
    border-radius: 8px;
    padding: 10px;
  }
  .dialog-body{}.dialog-footer {
    text-align: right; }}Copy the code

One detail here is that the Z-index of the Base-Dialog must be larger than the overlay to ensure that the dialog is displayed on top of the overlay.

  1. Open theapp.component.htmlAdd the following code
<button (click)="dialogRef.show()">Show</button>

<app-my-dialog class="dialog-container"  dialogTitle="Here's the title." #dialogRef>
  <ng-container class="dialog-body"> <div> <p> This is the content </p> </div> </ng-container> <ng-container class="dialog-footer">
    <button (click)="dialogRef.close()"</button> </ng-container> </app-my-dialog>Copy the code
  • DialogRef is the reference alias of this component
  • <ng-container class="dialog-body">Like slots in Vue, the HTML inside replaces the component inside<ng-content select=".dialog-body"></ng-content>The effect is as follows: click the “show” button to display the pop-up window, and click the “Close” button in the pop-up window to restore the original state.

  1. Most of the functionality is done, but the rest is styling and adding some extra features, such as the center display now, the bottom display in the example, and animation in CSS3.