Sleepy Head Modal

and published
Sleepy Head Modal

Hey, today’s post I will be showing you how you can design a modal alert for users that go inactive on your website. The idea is to produce a humorous modal popup for AFK users, but you can adapt the code for other things such as asking the user if they want to join your website mailing list.

Using and adapting this code I have made a simple modal script that will detect the user’s mouse movement and keyboard presses on your website. Basically the script works by setting a timer that will count to a set number, once it reaches that number it will execute our modal, whenever the user moves their mouse or presses a key on the keyboard it will reset the timer.

The jQuery JavaScript

The code below was quickly thrown together and has some room for some improvement:


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;
    }
}

Setting up the timer

There are two values you need to change in order to setup the timer, these are setInterval and idleTime. setInterval works in milliseconds and sets the units, idleTime is how many of those units it should count… for example if you want 30mins then we set the setIterval to 60000 (60secs) and idleTime to 30 (because 60seconds x 30 = 30mins).

For demo purposes only the source files and JSFiddle uses a timer of 20seconds, I highly recommend you don’t annoy your site visitors with anything less than 30mins.

Closing the modal

Using the click function we have set modal to close when the user clicks the X, the wake up button and also the foreground. By using the event stopPropagation we ignore clicks made within the modal apart from the buttons assigned. The closing of the modal will also reset the timer.

The CSS

Below you can find the CSS I made for the modal, feel free to edit the code to your liking. I assume that most of my readers will have some knowledge on CSS and HTML so I won’t explain this part, however if you want some changes made and you need some help then please leave a comment.


.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("../img/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("../img/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;
    }
}

HTML


<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>

As you can see the code is pretty simple… simply add the HTML code to the bottom of your page.

Sleepy Head Modal JSFiddle

Sleep Head Modal Source Files

If you wish to make some modifications to the vectors, css, html or JavaScript then I recommend you download the source files. Included is the owl vectors (made by me) and saved in multiple vector formats. Also included is HTML/JS/CSS files.

Download Source Files

License free for both personal and commercial usage

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>