Pasted

 <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<title>Lightbox Test</title>
    <style type="text/css">
 
        body
        {
            font-family: Helvetica, Arial;
        }
 
        .backdrop
        {
            position:absolute;
            top:0px;
            left:0px;
            width:100%;
            height:100%;
            background:#000;
            opacity: .0;
            filter:alpha(opacity=0);
            z-index:50;
            display:none;
        }
 
 
        .box
        {
            position:absolute;
            top:20%;
            left:30%;
            width:500px;
            height:300px;
            background:#ffffff;
            z-index:51;
            padding:10px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            -moz-box-shadow:0px 0px 5px #444444;
            -webkit-box-shadow:0px 0px 5px #444444;
            box-shadow:0px 0px 5px #444444;
            display:none;
        }
 
        .close
        {
            float:right;
            margin-right:6px;
            cursor:pointer;
        }
 
        </style>
 
        <script type="text/javascript">
            
            jQuery(document).ready(function(){
                
                jQuery('.lightbox').click(function(){
                    jQuery('.backdrop, .box').animate({'opacity':'.50'}, 300, 'linear');
                    jQuery('.box').animate({'opacity':'1.00'}, 300, 'linear');
                    jQuery('.backdrop, .box').css('display', 'block');
                });
 
                jQuery('.close').click(function(){
                    close_box();
                });
 
                jQuery('.backdrop').click(function(){
                    close_box();
                });
 
            });
 
            function close_box()
            {
                jQuery('.backdrop, .box').animate({'opacity':'0'}, 300, 'linear', function(){
                    jQuery('.backdrop, .box').css('display', 'none');
                });
            }
 
        </script>
</head>
<body>
 
    <h1>Lightbox Example</h1>
    <a href="http://www.tonylea.com/2011/how-to-create-your-own-jquery-lightbox/" target="_blank">See Tonylea.com</a>
    <br />
    <a href="#" class="lightbox">Open Lightbox</a>
 
    <div class="backdrop"></div>
    <div class="box"><div class="close">x</div>This is the lightbox!!!</div>
 
    </body>
</body>
</html>