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.min.js"></script>
    <!-- https://craig.is/killing/mice -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mousetrap/1.4.6/mousetrap.min.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('textarea#lbcode').val(jQuery('.note').html());
            jQuery('.backdrop, .box').animate({'opacity':'.50'}, 300, 'linear');
            jQuery('.box').animate({'opacity':'1.00'}, 300, 'linear');
            jQuery('.backdrop, .box').css('display', 'block');  
            Mousetrap.bind('enter', function() { jQuery('.lightbox-buttons .lightbox_save_close').trigger('click'); });
            Mousetrap.bind('esc', function() { jQuery('.lightbox-buttons .lightbox_close').trigger('click'); });
        });
        jQuery('.lightbox_save_close').click(function(){
            var strTxt = jQuery('textarea#lbcode').val().toString();
            jQuery('.backdrop, .box').animate({'opacity':'0'}, 300, 'linear', function(){
                jQuery('.backdrop, .box').css('display', 'none');
 
            });
            jQuery('.note').html(strTxt);
            jQuery('textarea#lbcode').val(""); // clean up textarea
            unbind_keys();
        });
 
        jQuery('.lightbox_close').click(function(){
            jQuery('.backdrop, .box').animate({'opacity':'0'}, 300, 'linear', function(){
                jQuery('.backdrop, .box').css('display', 'none');
            });
            jQuery('textarea#lbcode').val(""); // clean up textarea
            unbind_keys();
        });
 
        jQuery('.close').click(function(){
            close_box();
            unbind_keys();
        });
 
        jQuery('.backdrop').click(function(){
            close_box();
            unbind_keys();
        });
    });
 
    function close_box()
    {
        jQuery('.backdrop, .box').animate({'opacity':'0'}, 300, 'linear', function(){
            jQuery('.backdrop, .box').css('display', 'none');
        });
        jQuery('textarea#lbcode').val(""); // clean up textarea
    }
 
    function unbind_keys()
    {
        Mousetrap.unbind('enter');
        Mousetrap.unbind('esc');
    }
</script>
</head>
<body>
    <h1>Lightbox Textarea Example</h1>
    <a href="#" class="lightbox">Open Lightbox</a>
    <div class="note"><p style="color:green;">Hello world</p></div>
 
    <div class="backdrop"></div>
    <div class="box"><div class="close">x</div>This is the lightbox!!!<div>
         <textarea id="lbcode" rows="8" cols="68"></textarea> 
        </div>
        <div class="lightbox-buttons">
            <a class="lightbox_save_close" href="#" >OK<a>&nbsp;<a class="lightbox_close" href="#" >Cancel</a>
        </div>
    </div>
    </body>
</body>
 
</html>