Jquery popup help

Jquery popup help

I created a jquery popup from a utube tutorial.  it is not working correctly.  The mask will not append.  (I think this is the main problem).  I would also like to adjust it to execute off of the actual page load and not the click event but my attempts to change it have not worked.  Any help will be great.
  1. <!DOCTYPE HTML>
    <html>
    <head>
    <script type="text/javascript" src="./Embedded_Vids/html_files/jquery-1.8.0.min.js"></script>
    </head>

    <style>
    body{
    background: #e2e2e2;
    margin: 0px;
    padding:0px;
    color: #fff;
    }

    .popupInfo{
    display: none;
    padding: 15px;
    background: #000;
    border: 1px solid #1852fd;
    float: left;
    font-size: 1.2em;
    position: fixed;
    left:50%;
    top:50%;
    margin: -100px 0 0 -100px;
    z-index: 99999;
    box-shadow; 0px 0px 4px #1852fd;
    -moz-box-shadow; 0px 0px 4px #1852fd;
    -webkit-box-shadow; 0px 0px 4px #1852fd;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    }

    #mask{
        display: none;
        background: #000;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 88888;
        width: 100%;
        height: 100%;
        opacity: .070;
    }

    </style>

    <script>
    $(document).ready(function(){
       
        $('a.popup-window').click(function(){ 
           
            var popupBox = $(this).attr('href');
            $(popupBox).show();

            var popMargTop = ($(popupBox).height() + 24) / 2;
            var popMargLeft = ($(popupBox).width() + 24) / 2;

            $(popupBox).css({
                'margin-top': -popMargTop,
                'margin-left': -popMargeLeft
            });

            $('body').append('<div id="mask"></div>');
            $('#mask').show();
            return false;
       

        });


        $('a.close, #mask').live('click', function(){

            $('#mask , .popupinfo , #popup-box').hide(0,function() {

                $('#mask').remove();

                });

            return false;


        });
    });

    $(document).keyup(function(e) {

        if(e.keyCode == 27) {
            $('#mask, .popupinfo, #popup-box').hide();
        return false;
        }
    });
    </script>
    <body>


    <a href="#popup-box" class="popup-window"> random text </a>

    <div id="popup-box" class="popupInfo">

    <p>This is some information</p>
    <a href="#close-popup" class="close"><img src="./Embedded_Vids/html_files/close_button.png"></img></a>

    </div>


    </body>
    </html>