modal thoughts sloppiness

An eight digit hexadecimal setting for background-color can be superior for the overlay for a modal compared to an opacity setting in CSS. You will want to fill the whole of the browser with a div to prevent a user from clicking through to the button below in a typical in-your-face modal implementation, but...

background-color: #00000044;

 
 

...may be superior in this regard for making a greyed-out (disabled) effect for everything beneath the modal as...

background-color: #000000;
opacity: 0.25;

 
 

...will, affect the immediate div the same way, but unfortunately also reduce the... oh wait... that (the eight digit approach) only works in Chrome and not in IE. I guess you have to have the second setting. Don't put the modal part of your modal inside of the giant div covering everything with the opacity cranked down as the modal itself will be washed out too. I really do not have a good strategy for disabling tabbing to controls behind the modal in an Angular 7 application. Sigh. My component looks like this:

import { Component, Input, Output, EventEmitter, ViewChild, ElementRef, OnChanges } from '@angular/core';
@Component({
   selector: 'error',
   templateUrl: './error.component.html',
   styleUrls: ['./error.component.scss']
})
export class ErrorComponent implements OnChanges {
   @Input() error: string;
   @Output() close = new EventEmitter<void>();
   @ViewChild('closeLink') link: ElementRef<HTMLElement>;
   
   public ngOnChanges() {
      if (this.error) {
         this.link.nativeElement.focus();
      }
   }
   
   public clear():boolean {
      this.close.emit();
      return false;
   }
}

 
 

The template:

<article id="outererrorwrapper" [ngClass]="{displaynone:!error}">
   <section id="middleerrorwrapper">
      <div id="innererrorwrapper">
         <div id="closecontrol"><a #closeLink href="#" (click)="clear()" (keydown)="clear()"
               tabindex="-1">x</a></div>
         <div id="genericheader">An Error has Occurred</div>
         {{error}}
      </div>
   </section>
</article>
<article id="greyedouteffect" [ngClass]="{displaynone:!error}"></article>

 
 

The Sass:

$black: #000000;
$grey: #CCCCCC;
$white: #FFFFFF;
@mixin uplift() {
   position: absolute;
   margin-top: -44px;
   font-size: 20px;
}
a {
   text-decoration: none;
   cursor: pointer;
   outline: none;
   &:link {
      color: $grey;
   }
   &:visited {
      color: $grey;
   }
   &:hover {
      color: $black;
   }
   &:focus {
      color: $grey;
   }
   &:active {
      color: $grey;
   }
}
#closecontrol {
   @include uplift();
   font-weight: bold;
   width: 20px;
   margin-left: 560px;
}
.displaynone {
   display: none;
}
#genericheader {
   @include uplift();
}
#greyedouteffect {
   padding-top: 4px;
   position:absolute;
   width: 100%;
   left: 0;
   top: 56px;
   font-family: proxima,Gotham,'Helvetica Neue',Helvetica,Arial,sans-serif;
   color: #000000;
   margin-top: -60px;
   z-index: 199;
   height: 100%;
   background-color: $black;
   opacity: 0.25;
}
#innererrorwrapper {
   margin-top: 50px;
   border-top: 1px solid $grey;
   margin-bottom: 20px;
   padding: 10px 10px 0 10px;
   font-size: 13px;
}
#middleerrorwrapper {
   margin: 60px calc(50% - 300px) 0 calc(50% - 300px);
   width: 600px;
   background-color: $white;
   border-radius: 15px;
   border: 1px solid $grey;
   position: absolute;
}
#outererrorwrapper {
   padding-top: 4px;
   position:absolute;
   width: 100%;
   left: 0;
   top: 56px;
   font-family: proxima,Gotham,'Helvetica Neue',Helvetica,Arial,sans-serif;
   color: #000000;
   margin-top: -60px;
   z-index: 200;
}

 
 

The Russian doll the component is inside of has this in it at its TypeScript:

public error: string;
public clear():void {
   this.error = "";
}

 
 

The bit of the Russian doll's template that calls out to my component is:

<error (close)="clear()" [error]="error"></error>