title: How can I make a modal message box with AngularJS?
body: <p>I have this code:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div&gt;
        xxx
      &lt;/div&gt;
      &lt;div id="error"
           ng-show="er.msg"&gt;
          &lt;div style="color: white; background-color: purple; height: 2rem; display: flex; align-items: center;"&gt;
              &lt;div style="width: 90%; margin-right: auto; margin-left: auto;"&gt;{{ er.msg  }} &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;   
      &lt;div&gt;
        xxx
      &lt;/div&gt;  
  &lt;/body&gt;
  </code></pre>
  
  <p>Is there a way that I can make a mask appear over the whole page to prevent user input while the error dialog is showing? Note this is angular so I can make a div show with ng-show="er.msg" or I can hide a div with ng-show="!er.msg".</p>