JSFiddle - React, Tailwind, and code Playground

by denodir

HTML

<div id="dialog" title="Hello there">
    <p>Are you still there?</p>
</div>

CSS

#dialog
{
    display: none;
}

JavaScript

idleTime = 0;
$(document).ready(function () {
    //Increment the idle time counter every minute.
    var idleInterval = setInterval(timerIncrement, 60000); // 1 minute

    //Zero the idle timer on mouse movement.
    $(this).mousemove(function (e) {
        idleTime = 0;
    });
    $(this).keypress(function (e) {
        idleTime = 0;
    });
});

function timerIncrement() {
    idleTime = idleTime + 1;
    if (idleTime > 59) { // 1 hour
        $("#dialog").dialog({
            buttons: {
                "Yes": function() {
                  $(this).dialog("close");
                },
                "No": function() {
                  $(this).dialog( "close" );
                }
              }
        });
    }
}