Custom preview in fancybox or similar lightbox with specific dimensions?

The preview function in CKEditor is cool, but what I REALLY need is a preview in a lightbox with dimensions that I can specify versus just a new browser tab.

I tried creating my own preview button using the code below, which I figured I could then tweak to make it load in a lightbox, but this code shows a preview of the editor contents when the page was loaded rather than the current (changed) content. Any ideas what I'm doing wrong, or any tips to achieve what I'm looking for? Thanks!

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="ckeditor/adapters/jquery.js"></script>

<script type="text/javascript">
    $(document).ready( function() {
        $('#previewButton').click( function () {
            var contents = $('#editor1').val();
            var mywin = window.open("", "ckeditor_preview", "location=0,status=0,scrollbars=0,width=500,height=500");

            $(mywin.document.body).html(contents);
        });

        $('#editor1').ckeditor();      
    });
</script>

<textarea id="editor1" cols="5" rows="5">
Contents...
</textarea>

<button id="previewButton">Preview</button>