title: JQuery DIV popup while making the webpage dimmer
body: <p>I have the following CSS:</p>
  
  <pre><code>.faq {
      position: absolute;
      border: 3px double #078800;
      background: #ECFFEB;
      left: 480px;
      width: 550px;
      z-index: 99999;
  }
  #showFAQ {
      cursor: pointer;
      color: #018125;
  }
  </code></pre>
  
  <p>JQuery:</p>
  
  <pre><code>$(document).ready(function(){
      $('#showFAQ').click(function(){
          $('.faq').show().css("top", "400px").animate({top: 1150}, 300);
      });
  
      $('.sButton').click(function(){
          $('.faq').fadeOut('slow');
      });
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;span id="showFAQ"&gt;FAQ&lt;/span&gt;
  
  ...
  
  &lt;div class=faq style='display: none'&gt;
      &lt;table border=0 cellPadding=8 cellSpacing=8 width=100%&gt;
          &lt;tr&gt;
              &lt;td colSpan=2 align=center style="font-family: Verdana, Arial; color: #078800; font-weight: bold; font-size: 18px;"&gt;Frequently Aasked Questions&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;1. Do I have to complete the entire "Your Information" section?&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td style="padding-left:50px;"&gt;Yes, all information inside the "Your Information" is required to successfully complete the exam. Failure to do so will result in having to retake the exam from scratch.&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;2. What if my browser crashes or the page exits and I was in the middle of the exam?&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td style="padding-left:50px;"&gt;Unfortunately, at this time there is no way to save the session. You will have to retake the exam from the start. We are working on fixing that and will update everyone on when it goes in effect.&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;3. Can I retake the exam multiple times?&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td style="padding-left:50px;"&gt;Yes, but only the first one will count. If for any reason, you needed to take it more than once, please email HR and let them know why and they will reach out to you to with resolution.&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;4. I pressed the "Submit Answers" button and now the button shows "Processing..." but I can't press it anymore?&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td style="padding-left:50px;"&gt;There is an error control put in place to ensure every question is answered before submitting the exam. Please ensure all questions have been answered and then the "Processing..." button will change back to "Submit Answers" which is clickable.&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;5. I did everything as per instruction, but I can't still submit the exam.&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td style="padding-left:50px;"&gt;Please reach out to our Helpdesk at x2000 for further troubleshooting steps to assist in completing the exam.&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colSpan=2 align=center&gt;&lt;input class=sButton type=button value="Close Window" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What I am looking to do is once the popup appears, i want the entire page to dim out so the popup gets the user's attention. I know there are others out there but I decided to do my own without needing much coding.</p>
  
  <p>I want to use the following image which has 45% opacity:
  <img src="https://i.stack.imgur.com/HwhZz.png" alt="Fade BG"></p>
  
  <p>I want to put the image using repeat-x and repeat-y to cover the entire page directly below the popup so the user can still see the page but the popup stands out. Once I close the popup, i would like the image to fadeout to display the webpage.</p>