How to create an Overlay message box

Here is the CSS code:

<style>  
    a.activator{
        font-family:"Courier New", Courier, monospace;
        font-size:36px;
text-decoration:none;
color:#666666;
font-weight:bold;
    }
  
    /* Style for overlay and box */
    .overlay{
        background:transparent url(images/overlay.png) repeat top left;
        position:fixed;
        top:0px;
        bottom:0px;
        left:0px;
        right:0px;
        z-index:100;
    }
    .box{
        position:fixed;
top:40%;
        left:-450px;
        background-color:#fff;
        color:#7F7F7F;
        padding:20px;
        border:2px solid #ccc;
        -moz-border-radius: 20px;
        -webkit-border-radius:20px;
        -khtml-border-radius:20px;
        -moz-box-shadow: 0 1px 5px #333;
        -webkit-box-shadow: 0 1px 5px #333;
        z-index:101;
    }
    .box h1{
        border-bottom: 1px dashed #7F7F7F;
        margin:-20px -20px 0px -20px;
        padding:10px;
        background-color:#FFFFFF;
        color:#666666;
        -moz-border-radius:20px 20px 0px 0px;
        -webkit-border-top-left-radius: 20px;
        -webkit-border-top-right-radius: 20px;
        -khtml-border-top-left-radius: 20px;
        -khtml-border-top-right-radius: 20px;
    }
    a.boxclose{
        float:right;
        width:26px;
        height:26px;
        background:transparent url(images/cancel.png) repeat top left;
        margin-top:-30px;
        margin-right:-30px;
        cursor:pointer;
    }
</style>

Here is the HTML code:

<!-- The overlay and the box -->
<a id="activator" class="activator" href="#">Click Me!</a>
<div class="overlay" id="overlay" style="display:none;"></div>
<div class="box" id="box">
    <a class="boxclose" id="boxclose"></a>
    <h1>Your Own Message</h1>
    <p>The Message will be over hear.</p>
    <p>You can do any thing in this box. Just make it. And enjoy it.</p>
</div>

Here is the jQuery code:

<!-- The JavaScript -->
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
    $(function() {
        $('#activator').click(function(){
            $('#overlay').fadeIn('fast',function(){
                $('#box').animate({'left':'410px'},500);
            });
        });
        $('#boxclose').click(function(){
            $('#box').animate({'left':'-450px'},500,function(){
                $('#overlay').fadeOut('fast');
            });
        });
    });
</script>