JSFiddle - React, Tailwind, and code Playground

HTML

<div class="btn-sign">
     <h2>This is page body</h2>

</div>
<div id="bounce" class="bounce-popup">
<a href="#" class="close">Close</a>

     <h1>Bounce Box !</h1> 
    <p>How to load it if user is going to leave site like Bounce Exchange?</p>
</div>

CSS

a {
    text-decoration:none;
    color:#00c6ff;
}
h1 {
    font: 4em normal Arial, Helvetica, sans-serif;
    padding: 20px;
    margin: 0;
    text-align:center;
}
h2 {
    color:#bbb;
    font-size:3em;
    text-align:center;
    text-shadow:0 1px 3px #161616;
}
#mask {
    display: none;
    background: #000;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    z-index: 999;
}
.bounce-popup {
    display:none;
    background: #fff;
    padding: 10px;
    border: 2px solid #ddd;
    float: left;
    font-size: 1.2em;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 99999;
    box-shadow: 0px 0px 20px #999;
    -moz-box-shadow: 0px 0px 20px #999;
    /* Firefox */
    -webkit-box-shadow: 0px 0px 20px #999;
    /* Safari, Chrome */
    border-radius:3px 3px 3px 3px;
    -moz-border-radius: 3px;
    /* Firefox */
    -webkit-border-radius: 3px;
    /* Safari, Chrome */
}
img.btn_close {
    float: right;
    margin: -28px -28px 0 0;
}

JavaScript

$(document).one('mouseleave', showDialog);


function showDialog() {
    $('#bounce').fadeIn(300);
    var popMargTop = ($('#bounce').height() + 24) / 2;
    var popMargLeft = ($('#bounce').width() + 24) / 2;

    $('#bounce').css({
        'margin-top': -popMargTop,
            'margin-left': -popMargLeft
    });

    // Add the mask to body
    $('body').append('<div id="mask"></div>');
    $('#mask').fadeIn(300);

    // When clicking on the button close or the mask layer the popup closed
    $('a.close, #mask').on('click', function () {
        $('#mask , .bounce-popup').fadeOut(300, function () {
            $('#mask').remove();
        });
        return false;
    });
}