title: How to dim the background when a confirm() is shown and turn dim off when user answers yes or no?
body: <p>I found the similar question about using alert() but changing that to confirm() doesn't work.  Need to return the response.   This results in the &quot;Not confirmed&quot; alert being displayed first. What do I need to do to fix this?</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>var originalConfirm = window.confirm;
  window.confirm = function(args) {
    document.querySelector("html").classList.add("darkenPage");
    setTimeout(function() {
      var x = originalConfirm(args);
      document.querySelector("html").classList.remove("darkenPage");
      return (x);
    });
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html.darkenPage {
    background-color: black;
  }
  
  html.darkenPage body {
    opacity: 0.6;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button onclick="if (confirm('Hello World, yes or no')) { alert('Confirmed'); } else { alert('Not confirmed'); }  "&gt;Confirm&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>