title: Greyout background onclick of button to display popup
body: <p>I have a page where clicking on the button it should greyout the background and the popup msg should be displayed over the greyout area..What im getting now is popup displayed over the alone background is not greyout .
  This the script and style im applying </p>
  
  <pre><code>&lt;script&gt;
      function deselect() {
          $(".pop").hide();
      }
  
      $(function () {
          $("#decline").live('click', function () {
              $(".pop").css({ "display": "block", opacity: 0.7, "width": $(document).width(), "height": $(document).height() });
              $(".pop").show();
          });
  
          $("#close").live('click', function () {
              deselect();
              return false;
          });
  
      });
  &lt;/script&gt;
  
  &lt;style type="text/css"&gt;
      .messagepop {
          background-color: #FFFFFF;
          border: 1px solid #999999;
          cursor: default;
          display: none;
          margin-top: -39em;
          margin-left: 26em;
          position: absolute;
          text-align: left;
          width: 394px;
          z-index: 50;
          padding: 25px 25px 20px;
      }
  
      .popuptxt {
          display: block;
          margin-bottom: 3px;
          padding-left: 15px;
          text-indent: -15px;
          font-weight: 700;
      }
  
      .popupbtn {
          padding-top: 15px;
          padding-left: 135px;
      }
  
      .messagepop p, .messagepop.div {
          border-bottom: 1px solid #EFEFEF;
          margin: 8px 0;
          padding-bottom: 8px;
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>THis html code</p>
  
  <pre><code>&lt;input id="decline" type=button name="Decline" value="Decline"&gt;
      &lt;div class="messagepop pop"&gt;
          &lt;span&gt;&lt;font class="popuptxt"&gt;By clicking decline, download will not occur, and window will close&lt;/font&gt;&lt;/span&gt;
           &lt;div class="popupbtn"&gt;
           &lt;input type="button" name="Ok" class="btn btn-sm  btn-orange" value="&lt;%=labelutils.printTranslatedValues("Ok")%&gt;" onclick="window.open('', '_self', ''); window.close();"&gt;
           &lt;input id="close" type="button" name="Cancel" class="btn btn-sm btn-gray-dark"  value="&lt;%=labelutils.printTranslatedValues("Cancel")%&gt;"&gt;
           &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>