transparent window through

by btevfik

HTML

<div id="content">
    <p>
        Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.
    </p>
    <p>
        Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.
    </p>
    <p>
        Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.
    </p>
    <p>
        Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.
    </p>
    <p>
        Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.
    </p>
    <div id="overlay"></div>
</div>

CSS

#overlay {
    height:150px;
    width:150px;
    border:1px solid black;
    background:rgba(0, 0, 0, .2);
    position:absolute;
}
body{
    overflow:hidden;
}

JavaScript

var oh = $('#overlay').height(),
    ow = $('#overlay').width()
    border = $(window).width() +oh+'px solid #000';
$('#overlay').hide().css({
    border : border
}).css({
    top: ($(window).height() /2) - $('#overlay').outerHeight() /2,
    left :($(window).width() /2) -$('#overlay').outerWidth() /2
}).show()
$('#overlay').draggable();