popup

popup.html

<style>
    #bg-blackout {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.2);
        z-index: 100;
    }

    #bg-blackout .popup {
        position: fixed;
        top: 100px;
        left: 40%;
        width: 300px;
        height: 200px;
        color: #f00;
        background-color: #fff;
    }

    #bg-blackout .popup .close {
        position: absolute;
        top: -15px;
        right: -15px;
        display: block;
        width: 34px;
        height: 34px;
        background: url('/images/popup_close.png') no-repeat;
        cursor: pointer;
    }
</style>

<script>
    $(document).ready(function () {
        $('body').click(function (e) {
            if ($(e.target).closest('#bg-blackout .popup').length == 0) {
                $('#bg-blackout').fadeOut();
                $('body').css('overflow', 'auto').css('margin-right', '0');
            }
        });

        $('#bg-blackout .popup .close').click(function (event) {
            $('#bg-blackout').fadeOut();
            $('body').css('overflow', 'auto').css('margin-right', '0');
        });
    });
</script>

<div id="bg-blackout">
    <div class="popup">
        <p class="close"></p>
        <p>data..</p>
    </div>
</div>