HTML - Darken Screen Behind A Message

<!--Begin Left Column-->
<div id="column-left-2">
<br />
  <!--Begin Whats Showing Menu-->
  <div class="header-narrow"><h3>[var.get_type]</h3></div>
    <div class="whats-showing">
      <ul>
        <li><!--<a href="[var.url_link]/load/featured">[var.lang_featured]</a>--></li>
        <li><!--<a href="[var.url_link]/load/viewed">[var.lang_most_viewed]</a>--></li>
        <li><!--<a href="[var.url_link]/load/recent">[var.lang_most_recent]</a>--></li>
        <li><!--<a href="[var.url_link]/load/comments">[var.lang_most_comments]</a>--></li>
      </ul>
   </div>
   <div class="container-narrow-bottom"></div><!--End Whats Showing Menu-->
   <br />
   <!--Begin Popular Tag Cloud populate from search type ??-->
   <!--<div class="header-narrow"><h3>[var.lang_Tags_most_popular]</h3></div>-->
   <!--<div class="whats-showing"><!--[var.tag_cloud_block;htmlconv=no;comm]--></div>-->
   <!--<div class="container-narrow-bottom"></div>--><!--End Popular Tag Cloud-->
   <!--Begin Left Advert-->
   <!--<div class="container-narrow-top"></div>-->
   <!--<div id="advert-left"><!--[var.ads_left;htmlconv=no;comm]--></div>-->
   <!--<div class="container-narrow-bottom"></div>--><!--End Left Advert-->
   <!--<div style="height:120px;">&nbsp;</div>-->
</div><!--End Left Column-->

<!--Begin Right Column-->
<div id="column-right-2">

  <!--Begin Video Search List-->
  <div style="height: 2px;">&nbsp;</div>

  <span style="margin-bottom: 12px;" class="font5_15">
    "[var.keyword]"&nbsp;&nbsp;[var.get_type_word]&nbsp;[var.lang_search]&nbsp;[var.results_show]&nbsp;-&nbsp;[var.results_of]&nbsp;of&nbsp;[var.total_records]&nbsp;[var.lang_results] <br />

     <!-- Replace ambiguous text with clear button links below. -JG -->
     <!-- Please Select the Continue Button to Purchase Now - Or Search Again.<br />-->
     <form id="buyVideo" name="buyVideo" method="post" action="buy-video.php">
       <!-- CONTINUE button replaced. -JG -->

       <!--input type="submit" name="purchase" value="Continue" style="margin:7px 0" rel="gb_page_center[600, 435] "-->
       <input type="submit" name="purchase" value="Use Credits Now" style="margin:7px 0" rel="gb_page_center[600, 435] ">
       <input type="button" name="search" value="Search Again" onclick="window.location.href='page.php?page=9';" style="margin:7px 0">
       <input type="button" name="search" value="Purchase Credits" onclick="window.location.href='credits.php';" style="margin:7px 0">
       <input type="hidden" name="keyword" value="[var.keywords2]">
       <input type="hidden" name="submitted" value="yes">
       <input type="hidden" name="ttl" value="[var.total_price]">
       <input type="hidden" name="user_id" value="[var.user_id]">
       <input type="hidden" name="credits" value="[var.member_credits]">
       <input type="hidden" name="id[]" value="[blkfeatured2.indexer;block=input]"></input>

  </span>
	<br><!-- Check All Box  -->
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="checkall" onclick='checkedAll()'> Select All<br>
	<!-- end checkbox mod -->
  <!-- ******************************** START OF CUSTOM MESSAGE BLOCK ******************************* -JG -->
  <script>
    function doCreditCheck()
    {
      // The custom message block only appears when the PAY/SEARCH buttons are present.
      // The presence of those buttons indicates that you need to pay before viewing the video.
      document.getElementById('popupBuyMsg').style.display = 'block';
      // We return false so that the href associated with this object is ignored.
      return false;
    }
  </script>
  <style>
    .buymsg      { display:none; position:absolute; top:300px; left:300px; width:350px; background-color:#eeeeff; border-style:solid; border-width:1px; padding:15px 20px 5px 20px; }
    .buymsgclose { text-decoration:none; font-size:0.9em; font-variant:small-caps; margin-top:10px; }
  </style>
  <!-- Hidden message block to replace inner_purchase.htm when only a GreyBox message is being displayed. -->
  <div id="popupBuyMsg" class="buymsg">
     You must use "credits" to view this video.<br>
     You have <strong>[var.member_credits]</strong> credits in your account.<br>
     <br />
      To view this video select "Use Credits".<br>
      To purchase credits select "Purchase Credits".<br>
      Or Search Again.
     <div style="width:100%; text-align:right;">
       <a class="buymsgclose" href="#" onclick="document.getElementById('popupBuyMsg').style.display = 'none'; return false;">Close Window</a>
     </div>
  </div>
  <!-- ********************************** END OF CUSTOM MESSAGE BLOCK ********************************** -->

  <div id="content-list">
    <ul class="content-list-thumb" style="margin-top: 13px;">
      <span style="margin-left: 1px;"><input type="checkbox" name="checkedBoxs[]" value="[blkfeatured.indexer;block=div]"></span><br /> <br />

      <!-- Add an onclick feature that first checks to see if you need to use purchase credits. -JG -->
      <li><a href="videos/[blkfeatured.indexer;block=div]/[blkfeatured.title_seo;block=div]" rel="gb_page_center[600, 435]"><img src="uploads/thumbs/[blkfeatured.thumb_string;block=div].jpg" alt="video pic" width="120" height="90" border="0" /></a></li>
      <!--li><a onclick="return doCreditCheck();" href="videos/[blkfeatured.indexer;block=div]/[blkfeatured.title_seo;block=div]"><img src="uploads/thumbs/[blkfeatured.thumb_string;block=div].jpg" alt="video pic" width="120" height="90" border="0" /></a></li-->
    </ul>
    <ul class="content-list-info">
      <li><h4><span style="color: #000000;">[var.lang_title]:</span>&nbsp;&nbsp;<a href="videos/[blkfeatured.indexer;block=div]/[blkfeatured.title_seo;block=div]" rel="gb_page_center[600, 435] "><!--[blkfeatured.title;htmlconv=no;block=div;ope=max:70;comm]--></a></h4></li>
      <!--<li><b>[var.lang_description]:&nbsp;</b><!--[blkfeatured.description;htmlconv=no;block=div;ope=max:68;comm]--></li>-->
      <li><!--<span class="font4_12">[var.lang_rating]test&nbsp;&nbsp;</span>-->
        <!--<img border="0" src="themes/[var.user_theme]/images/[blkfeatured.star1;block=div]" width="18" height="18" alt="1 Star" />-->
        <!--<img border="0" src="themes/[var.user_theme]/images/[blkfeatured.star2;block=div]" width="18" height="18" alt="1 Star" />-->
        <!--<img border="0" src="themes/[var.user_theme]/images/[blkfeatured.star3;block=div]" width="18" height="18" alt="1 Star" />-->
        <!--<img border="0" src="themes/[var.user_theme]/images/[blkfeatured.star4;block=div]" width="18" height="18" alt="1 Star" />-->
        <!--<img border="0" src="themes/[var.user_theme]/images/[blkfeatured.star5;block=div]" width="18" height="18" alt="1 Star" />-->
        &nbsp;&nbsp;&nbsp;
        <!--<span class="font4_12">[var.lang_views]:&nbsp;</span>--><!--(<!--[blkfeatured.number_of_views;block=div;comm]-->)-->
        &nbsp;&nbsp;&nbsp;
        <!--<span class="font4_12">[var.lang_duration]:&nbsp;</span>--><!--(<!--[blkfeatured.video_length;block=div;ope=max:45;comm]-->)-->
        &nbsp;&nbsp;&nbsp;
        <!--<span class="font4_12">[var.lang_uploaded]:&nbsp;</span>-->
      </li>
      <li><!--<span class="font4_12">[var.lang_tags]:&nbsp;</span>--></li>
      <li><!--<b>[var.lang_comments] - [var.lang_responses]:&nbsp;</b>--><!--(<!--[blkfeatured.comments;block=div;ope=max:80;comm]-->)--></li>
    </ul>
 [onload;block=div;when [var.type_videos]=1;]
  </div>
  <!--End Video Search-->

  <!-- Pagination start -->
  <div align="center">
    <div id="pagination">
      <li>&nbsp;</li>
      <ul>[var.show_pages;htmlconv=no]</ul>
    </div>
  </div>
  <!-- Pagination end -->
</div><!--End Right Column-->
</form>