Timeout-Dialog.js

Timeout-dialog.js is a JQuery plugin that displays a timeout popover after a certain period of time. The timeout dialog should be used whenever you want to display to the user that the logged in session is about to expire. It creates a light box with a countdown and options to stay signed in or sign out.

You can download the timeout-dialog.js project from GitHub.

Examples

Click Here to See Demo

How to use

$.timeoutDialog();

Options

Name Type Default Description
timeout number 1200 The number of your session timeout (in seconds). The timeout value minus the countdown value determines how long until the dialog appears.
countdown number 60 The countdown total value (in seconds).
title string 'Your session is about to expire!' The title message in the dialog box.
message string 'You will be logged out in {0} seconds.' The countdown message where {0} will be used to enter the countdown value.
question string 'Do you want to stay signed in?' The question message if they want to continue using the site or not.
keep_alive_button_text string 'Yes, Keep me signed in' The text of the YES button to keep the session alive.
sign_out_button_text string 'No, Sign me out' The text of the NO button to kill the session.
keep_alive_url string /keep-alive The url that will perform a GET request to keep the session alive. This GET expects a 'OK' plain HTTP response.
logout_url string null The url that will perform a POST request to kill the session. If no logout_url is defined it will just redirect to the url defined in logout_redirect_url.
logout_redirect_url string / The redirect url after the logout happens, usually back to the login url. It will also contain a next query param with the url that they were when timedout and a timeout=t query param indicating if it was from a timeout, this value will not be set if the user clicked the 'No, Sign me out' button.
restart_on_yes boolean true A boolean value that indicates if the countdown will restart when the user clicks the 'keep session alive' button.
dialog_width number 350 The width of the dialog box.

Credit

Written by @rigoneri