title: Dialog window with partly opaque grey background
body: <p>When the user clicks a link I want to create a 'popup' dialog box centered in the browser window with a grey overly similar to this:</p>
  
  <p><a href="https://i.stack.imgur.com/9ZkE6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9ZkE6.png" alt="Chrome Confirmation Dialog Box"></a></p>
  
  <p>Note that the user can click anywhere outside the dialog box to dismiss it.</p>
  
  <p>I've tried following <a href="https://stackoverflow.com/questions/4396790/html-css-pop-up-window-and-disabled-background/4396852">this example</a>, but it just creates a black stripe in a white page like this:</p>
  
  <p><a href="https://i.stack.imgur.com/EbXXd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EbXXd.png" alt="Bad result - black stripe"></a></p>
  
  <p>Here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function blah() {
    var gab = document.createElement('div');
    gab.setAttribute('id', 'OVER');
    gab.innerHTML='&lt;div class="overlay"&gt;&lt;h1&gt;hello&lt;/h1&gt;&lt;/div&gt;';
    document.body.appendChild(gab);
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#OVER {
    width:100%;
    height:100%;
    left:0;/*IE*/
    top:0;
    text-align:center;
    z-index:5;
    position:fixed;
    background-color:#fff;
  }
  .overlay {
    width:100%;
    z-index:6;
    left:0;/*IE*/
    top:30%;
    font-color:#cdcdcd;
    font-size:0.8em;
    text-align:center;
    position:fixed;
    background-color:#000;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Title&lt;/title&gt;
    &lt;link rel="stylesheet" href="css/test.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;This is the title&lt;/h1&gt;
    Here is some text &lt;a href="#" onclick="blah();return false;"&gt;Click me&lt;/a&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>