Timeout Modals (Advanced)

You ONLY need to reference the modals library javascript file into script inside your page

<script type="text/javascript" src="/bscom.modals.js"></script> 

Please make sure that bootstrap version 4 and also jquery library both are already referenced in your pages before start using this library

Timeout Modal: Timeout can be used for session timeouts to warn users before his online session is going to end or expire, it comes with 2 options or buttons that allow user to either stay connected or logout as he no longer needs to use the website, in case user did not click those buttons, it will redirect him/her to a redirect url. below are some examples with short description. if you need more info. drop me an email "m.solimanz@hotmail.com".

Simplest way: You can specify only title and body as usual in modals, By default it should popup after 3 seconds and count for 10 seconds then redirects to logout url. {{c}} is a placeholder for counter, if you don't need it you can simply remove it at all.

<button class="btn btn-primary"
    onclick='bscom.modals.timeout("Session Timeout?", "Your session is going to end after {{c}}");'>
    Timeout
</button>
                     

Simple Timeout

You can easily remove Clear button by specifying {debug: false}

<button class="btn btn-primary"
 onclick='bscom.modals.timeout("Timeout?", "Your session is going to end after {{c}}", {debug: false});'>
 Timeout
</button>
 

Simple Timeout

Counter Types: You can specify the type of counter in the popup, 3 types or options are available: you have to put in the body {{c}} otherwise it will not be displayed
1. Count down (countdown | down | -1)
2. Count up (countup | up | 1)
3. Progress bar (progressbar | pg | 0)

<button class="btn btn-primary"
    onclick='bscom.modals.timeout("Timeout?", "Session is going to end after {{c}}", {type: 0, alive: "./alive.html"})'>
                        Progressbar</button>
<button class="btn btn-primary"
    onclick='bscom.modals.timeout("Timeout?", "Session is going to end after {{c}}", {type: -1})'>
                        Countdown</button>
<button class="btn btn-primary"
    onclick='bscom.modals.timeout("Timeout?", "Session is going to end within {{c}}", {type: 1})'>
                        Countup</button>

 

Progressbar Countdown Countup

Timings: You can specify when to display you timeout window and for how long it should be displayed before redirecting to redirect in case user did not press anything. - {after: ...} is used to specify when the popup should be displayed, this time should be specified in seconds (by default it's 3 seconds)
- {count: ...} is used to specify for how long the popup should be displayed, after this time the user should be redirected to redirect url.

The following example is poping up the window after 0 seconds, then displayed and count for 60 seconds then redirect to redirect
Hint: Please note that when you click Stay Connected, it is directly displayed again directly after 0 seconds

<button class="btn btn-primary"
 onclick='bscom.modals.timeout("Timeout?", "Your session will end after {{c}}", {after: 0, count: 60})'>
Progressbar</button>
 

Timeout (60 secs)

Event Handlers: you can manage and hook your handlers in different events, If you have any other events please contact me.

- onShow: function
- onAliveSuccess: function
- onAliveError: function

<button class="btn btn-primary"
    onclick='handlers()'>Progressbar</button>
<script>
function handlers(){
  bscom.modals.timeout("Timeout?",
    "Your session is going to end after {{c}}",
    {
       type: 0,
       onShow: function(){alert("shown");},
       onAliveSuccess: function(res){alert("Session Renewed, response returned from server " + res);},
       onAliveError: function(err){alert("Alive Ajax Request Error was " + err);}
    });
}
</script>
 

Timeout with Events (success)

You can specify url to be used for pinging the server to renew current session and also you have the ability to specify ajax type and data using these properties {alive: ..., aliveAjaxType: ..., aliveData: {...} }

Timeout with Events (error)

URLs (login, live, redirect, and logout) You can customize all URLs based on your application's needs, here is the definition of each one:
- alive: This URL is used by timeout to request your server (by default it is using GET) however you can override using aliveAjaxType, once user clicked Stay Connected
- logout: It will redirect to this URL in case user clicked Logout button.
- login: Once User click on Stay Connected to renew her session however sometimes errors might occur while refreshing the current session using alive url, e.g. ajax error due to invalid url or server error, at this time another popup should appear and ask user to login again. in such case it is required to specify your login URL. by default it has a value /login
- redirect: In case user neither clicked on Stay Connected nor Logout, e.g. cases when user left his machine, window will be redirect at this time to another URL informing user that he was logged out due to inactivity.

  function handlers(){
        bscom.modals.timeout("Timeout?",
            "Your session is going to end after {{c}}",
            {
                type: -1,
                alive: "./alive.html",
                logout: "./logout.html",
                login: "./login.html"
                redirect: "./inactive.html",
            });
    }
                        

Timeout (URLs)