Show Session Timeout alert to website users using jQuery

Many times when session times out, if the user does not refresh or request a page within the time-out period, the session ends. And it happens without showing any warning to the user. But now, You can alert your website users about Session Timeout using jQuery.

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.

How to use it?

Just download the plugin and include its library reference along with jQuery. A very basic example would be,


However, this plugin comes with many options that you can set to define session timeout. Some of them are,

  • timeout - The number of your session timeout (in seconds). The timeout value minus the countdown value determines how long until the dialog appears. The default value is 1200.
  • countdown - The countdown total value (in seconds). The default value is 60.
  • logout_url - 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 - 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.
  • title - The title message in the dialog box. The default value is 'Your session is about to expire!'
  • message - The countdown message where {0} will be used to enter the countdown value. The default value is ''You will be logged out in {0} seconds.'
      timeout: 1, 
      countdown: 60, 
      logout_redirect_url: ''

There are many other options as well which you can set. Please visit the official website for more detail.

Feel free to contact me for any help related to jQuery, I will gladly help you.

Responsive Menu
Add more content here...