<script type="text/javascript" src="http://webo4ka.ru/Ucoz3/prostoe_modalinoe_okno_na_jquery-1.4.2.min.js"></script>

<script type="text/javascript">   
   $(document).ready(function() {   
    //select all the a tag with name equal to modal   
    $('a[name=modal]').click(function(e) {   
    //Cancel the link behavior   
    e.preventDefault();   
    //Get the A tag   
    var id = $(this).attr('href');   
    //Get the screen height and width   
    var maskHeight = $(document).height();   
    var maskWidth = $(window).width();   
    //Set heigth and width to mask to fill up the whole screen   
    $('#mask').css({'width':maskWidth,'height':maskHeight});   
    //transition effect   
    $('#mask').fadeIn(1000);   
    $('#mask').fadeTo("slow",0.8);   
    //Get the window height and width   
    var winH = $(window).height();   
    var winW = $(window).width();   
    //Set the popup window to center   
    $(id).css('top', winH/2-$(id).height()/2);   
    $(id).css('left', winW/2-$(id).width()/2);   
    //transition effect   
    $(id).fadeIn(2000);   
    });   
    //if close button is clicked   
    $('.window .close').click(function (e) {   
    //Cancel the link behavior   
    e.preventDefault();   
    $('#mask, .window').hide();   
    });   
    //if mask is clicked   
    $('#mask').click(function () {   
    $(this).hide();   
    $('.window').hide();   
    });   
   });   
   </script>

<style>   
   a {color: #333; text-decoration: none; font-size: 25px;}   
   a:hover {color:#ccc; text-decoration:none}   
   #mask {   
    position:absolute;   
    left:0;   
    top:0;   
    z-index:9000;   
    background-color:#000;   
    display:none;   
    font-family: Verdana;   
    }   
   #boxes .window {   
    position:absolute;   
    height:300px;   
    width:600px;   
    display:none;   
    left:0;   
    top:0;   
    z-index:9999;   
    padding:20px;   
    text-align: center;   
    font-size: 25px;   
    }   
   #boxes #dialog {   
    width:375px;   
    height:203px;   
    padding:10px;   
    background-color:#ffffff;   
    }   
   .close {   
    float: right;   
    margin-top: 148px;   
    }   
   </style>

<a href="#dialog" name="modal">Простое модальное окно</a>   
   <div id="boxes">   
    <div id="dialog" class="window">   
    Простое модальное окно <br>   
    <span><a href="#" class="close"/>Закрыть его</a>   
    </div>   
    <div id="mask"></div>   
   </div>