Help with pop-up message

I'm using a php script to show a list of video thumbnails.
Presently when a thumbnail is selected a message page pops-up.
I'd like to replace the page pop-up with some code that simply launches a pop-up box.
I was given this code, but I believe it's incomplete and I don't know where to place it on the page:

<style>
    .msg      { display:none; position:absolute; top:300px; left:300px; width:350px; background-color:#eeeeff; border-style:solid; border-width:1px; padding:15px 20px 5px 20px; }
    .msgclose { text-decoration:none; font-size:0.9em; font-variant:small-caps; margin-top:10px; }
  </style>
  <div id="popupMsg" class="msg">
     You must read this message.<br>
     This is a test message box <br />
     <div style="width:100%; text-align:right;">
       <a class="msgclose" href="#" onclick="document.getElementById('popupMsg').style.display = 'none'; return false;"><font color="#800000">Close Window</font></a>
     </div>

Code (markup):

The page that currently has the page pop-up is this:

<!--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="roundedcornr_box_347061">
   <div class="roundedcornr_top_347061"><div></div></div>
      <div class="roundedcornr_content_347061">
         <p>text text text content goes here</p>
      </div>
   <div class="roundedcornr_bottom_347061"><div></div></div>
</div>
   <!--<div class="container-narrow-bottom"></div>-->
   <!--End Whats Showing Menu-->
   <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: 1200px;" 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 />You must <a href="login.php"><font color="#800000">log in</font></a> to view these  results.<br /><br />
  </span>
  <div id="content-list">
    <ul class="content-list-thumb">
    <li><a 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>&nbsp;<!--[var.lang_title]:--><!--<a href="videos/[blkfeatured.indexer;block=div]/[blkfeatured.title_seo;block=div]"><!--[blkfeatured.title;htmlconv=no;block=div;ope=max:70;comm]--></a>--></h4></li>
<li><b><!--[var.lang_description]:-->&nbsp;</b></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-->

Code (markup):

Any help will be greatly appreciated.