Edit in JSFiddle

var idleTime = 0;

$(document).ready(function () {
    var idleInterval = setInterval(timerIncrement, 10000);
    $(this).mousemove(function (e) {
        idleTime = 0;
    });
    $(this).keypress(function (e) {
        idleTime = 0;
    });
    $(".sleepy-close, .sleepy-overlay, .sleepy-wake-up").click(function () {
        $(".sleepy-overlay").hide();
        idleTime = 0;
    });
    $('.sleepy-modal').click(function (event) {
        event.stopPropagation();
    });
});

function timerIncrement() {
    idleTime = idleTime + 1;
    if (idleTime > 1) {
        $('.sleepy-overlay').fadeIn('slow');
        idleTime = 0;
    }
}
<div class="sleepy-overlay">
    <div class="sleepy-modal">
        <div class="sleepy-header">
            <span>Snoozing...</span>
            <div class="sleepy-close"> </div>
        </div>
        <div class="sleepy-content">
            <div class="sleepy-owl">
                <div class="sleepy-img"> </div>
            </div>
            <div class="sleepy-message">
                <p>Hey good looking, I have detected that you have been inactive for more than 20secs...</p>
                <p>I got sleepy so I've taken a nap!</p>
                <p class="sleepy-mobile-only">Alright Sleepy Head...</p>
            </div>
        </div>
        <div class="sleepy-wake-up">Wake Up!</div>
    </div>
</div>
<footer>
    <p>Script by <a href="https://www.bybe.net/about/">Simon Hayter</a></p>
</footer>
.sleepy-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
}
.sleepy-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    height: 250px;
    width: 400px;
    z-index: 11;
    -webkit-box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.25);
    box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.25);
    padding: 5px 10px;
}
.sleepy-header {
    font-family: Verdana, Verdana, Geneva, sans-serif;
    font-size: 16px;
}
.sleepy-header span {
    margin-top: 3px;
}
.sleepy-close {
    float: right;
    width: 16px;
    height: 16px;
    background-image:url("https://ac34f74d3a8f9e8ca699-5e5203a51e097ee9b458aceaa52c067a.ssl.cf3.rackcdn.com/i/blog/sleepy-head-close-x.svg");
    margin-top: 5px;
    cursor: pointer;
}
.sleepy-close:after {
    clear: both;
}
.sleepy-content,
.sleepy-modal,
.sleepy-wake-up {
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
}
.sleepy-content {
    padding: 15px 10px;
    background: #eee;
    height: 142px;
    margin: 10px auto;
}
.sleepy-message {
    float: left;
    width: 65%;
}
.sleepy-message p {
    font-size: 14px;
    font-family: Verdana, Verdana, Geneva, sans-serif;
}
.sleepy-owl {
    float: left;
    width: 35%;
}
.sleepy-owl div {
    width: 110px;
    height: 122px;
    background-image: url("https://ac34f74d3a8f9e8ca699-5e5203a51e097ee9b458aceaa52c067a.ssl.cf3.rackcdn.com/i/blog/sleepy-head-owl-default.svg");
}
.sleepy-wake-up {
    font-family: Verdana, Verdana, Geneva, sans-serif;
    background: #b23445;
    color: #541819;
    text-shadow: 0 1px 0 #be5244;
    float: right;
    padding: 5px 10px;
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.3) inset;
    cursor: pointer;
    -webkit-transition: all 0.30s ease;
    -moz-transition: all 0.30s ease;
    -ms-transition: all 0.30s ease;
    -o-transition: all 0.30s ease;
    transition: all 0.30s ease;
}
.sleepy-wake-up:hover {
    color: #fff;
}
@media only screen and (max-width: 40em) {
    .sleepy-message p {
        display: none;
    }
    .sleepy-modal {
        width: 320px;
        height: 200px;
    }
    .sleepy-modal {
        -webkit-border-radius: 0px;
        border-radius: 0px
    }
    .sleepy-wake-up {
        margin-top: -60px;
    }
    .sleepy-message .sleepy-mobile-only {
        display: block;
        text-align: right;
    }
}
@media only screen and (min-width: 40.063em) {
    .sleepy-message .sleepy-mobile-only {
        display: none;
    }
}

/* DEMO ONLY */
body {
    background-color: #269;
    background-image: linear-gradient(white 2px, transparent 2px), linear-gradient(90deg, white 2px, transparent 2px), linear-gradient(rgba(255, 255, 255, .3) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .3) 1px, transparent 1px);
    background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
    background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px font-family: Verdana, Verdana, Geneva, sans-serif;
}
footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    line-height: 20px;
    font-family: Verdana, Verdana, Geneva, sans-serif;
    background: #b23445;
    color: #541819;
    text-shadow: 0 1px 0 #be5244;
    text-align: right;
}
footer p {
    margin: 6px 10px;
}
footer a {
    font-family: Verdana, Verdana, Geneva, sans-serif;
    color: #541819;
    text-shadow: 0 1px 0 #be5244;
    text-decoration: none;
    -webkit-transition: all 0.30s ease;
    -moz-transition: all 0.30s ease;
    -ms-transition: all 0.30s ease;
    -o-transition: all 0.30s ease;
    transition: all 0.30s ease;
}
footer a:hover {
    color: #fff;
}