JQuery Close Modal After Inactivity

Question

I am creating a touch screen feedback kiosk that prompts users for their email address after they select a feedback option (good / bad).

Leaving their email address is optional, so the modal window should close after x seconds of inactivity.

How can I detect if a user is currently 'active' in the modal and close it if not (using JQuery)?

The countdown timer should be reset, and modal stay open if:

• The user begins to type in the input.

The modal should be closed if;

• The input has been inactive for x seconds (user leaves).

I have half of it complete, just need some help with the rest of it. Currently the timer only changes on each click of the input.

My current code is below;

Here's a link to a my fiddle.

HTML

<button type="button" class="btn btn-primary" id="feedbackFormBad">click</button>
<div aria-hidden="true" class="modal fade" id="memberNumberModal" role="dialog" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header modal-header-primary">
        <h1>Hello</h1>
      </div>
      <div align="center" class="modal-body">
        <p>Some text here.</p>
        <p span id="countdown"></p>
        <!-- show count down timer here -->
        <form id="memberNumberForm" class="form-inline">
          <div class="form-group mb-2">
            <input type="text" name="Email" class="form-control" id="memberNumber" placeholder="enter email" required>
          </div>
          <div class="modal-footer">
            <button type="submit" class="btn btn-primary">Send</button>
            <button type="button" class="btn btn-secondary" id="closeModal" data-dismiss="modal">No Thanks</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

JQuery

$(document).ready(function() {
  $("#feedbackFormBad").on("touchstart, click", function(e) {
    $('#memberNumberModal').modal('toggle');
    var counter = 5;
    var interval = setInterval(function() {
      counter--;
      $("#memberNumber").focus(function() {
        $("#countdown").html('Window will close in ' + counter + ' seconds.');
      });

      if (counter == 0) {
        $('#memberNumberModal').modal('hide');
        clearInterval(interval);
      }
    }, 1000);
  });
});

Any help is appreciated.

Answer 1

You could use a combination of setInterval and all of the events to achieve this. I've commented the code below.

Update

Originally, I'd posted an answer using the keyup function - missing the touchscreen part of the requirements. However, the below listens for any change to the text input. Let me know if this works.

The events were taken from this answer here Best way to track onchange as-you-type in input type="text"?

// Keep track of if user is active
var active = true;

// keep track of how long since the user has typed
var timeElapsed = 0;

// check every second
setInterval(function(){
  timeElapsed += 1;
  
  // example
  $("#timer").html(timeElapsed + " seconds inactive");
  
  // a minute has passed since the user has typed
  if(timeElapsed == 60){
    // close modal
    $('#memberNumberModal').modal('hide');
  }
}, 1000);

// if the user types, reset the timer
$("#test").on('change keydown paste input propertychange click keyup blur', function(){
  // user is active, has typed
  timeElapsed = 0;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<input id="test" type="text">
<span id="timer"></span>

Answer 2

Try with the below javascript code

$(document).ready(function() {
  $("#feedbackFormBad").on("touchstart, click", function(e) {
    $('#memberNumberModal').modal('toggle');
    var counter = 5;
    var interval = setInterval(function() {
      counter--;
      $("#countdown").html('Window will close in ' + counter + ' seconds.');

      if (counter == 0) {
        $('#memberNumberModal').modal('hide');
        clearInterval(interval);
      }
    }, 1000);
    $('body').bind('mousedown keydown', function(event) {
       counter = 5;
    });
  });
});

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>


<body>
  <button type="button" class="btn btn-primary" id="feedbackFormBad">click</button>
  <hr>
  <p>The timer should be reset if:</p>
  <ul>
    <li>The user begins to type in the input.</li>
  </ul>
  <p>The modal should be closed if:</p>
  <ul>
    <li>The input has been inactive for x seconds (user leaves).</li>
  </ul>
  <div aria-hidden="true" class="modal fade" id="memberNumberModal" role="dialog" tabindex="-1">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header modal-header-primary">
          <h1>Hello</h1>
        </div>
        <div align="center" class="modal-body">
          <p>Some text here.</p>
          <p span id="countdown"></p>
          <!-- show count down timer here -->
          <form id="memberNumberForm" class="form-inline">
            <div class="form-group mb-2">
              <input type="text" name="Email" class="form-control" id="memberNumber" placeholder="enter email" required>
            </div>
            <div class="modal-footer">
              <button type="submit" class="btn btn-primary">Send</button>
              <button type="button" class="btn btn-secondary" id="closeModal" data-dismiss="modal">No Thanks</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</body>