Simple Modal Auto Logout

Question

I am trying to make an auto logoff page with a js timer and jquery confirm modal. Everything works fine except it will not open the modal when the timer hits 2 seconds. Here is the code. Can anyone tell me what I am doing wrong?

<script type='text/javascript' src='simplemodal/js/jquery.js'></script>
<script type='text/javascript' src='simplemodal/js/jquery.simplemodal.js'></script>
<link type='text/css' href='simplemodal/css/confirm.css' rel='stylesheet' media='screen' />
<link type='text/css' href='simplemodal/css/demo.css' rel='stylesheet' media='screen' />
</head>
<body onload="StartClock();">

<form id="timerform" name="timerform" method="post" action="">
<input type="hidden" name="clock" id="clock" />
</form>

<!-- modal content -->
<div id='confirm'>
     <div class='header'><span>Confirm</span></div>
     <div class='message'></div>
     <div class='buttons'>
     <div class='no simplemodal-close'>No</div><div class='yes'>Yes</div>
</div>
</div>
    <!-- preload the images -->
    <div style='display:none'>
    <img src='simplemodal/img/confirm/header.gif' alt='' />
    <img src='simplemodal/img/confirm/button.gif' alt='' />
</div>

<script language="javascript">
  var c=0;
  var t;

function ClockCount(){

    c=c+1;
    document.timerform.clock.value = c;

    if (c >= 15) {
        //User didn't do anything so logged them off.
        console.log ("Logged Out!");
    }
    else if (c == 2){

        console.log ("Warning... Popup Modal to warn logoff.");

        $(document).ready(function(){
             $(".confirm").click();
         });
    }

t = setTimeout("ClockCount()",1000);

}

function StartClock() {
   ClockCount(); //Start the timer.
}

function LogOut() {
    window.location = "logout.asp"
}

jQuery(function ($) {
     $('#confirm-dialog input.confirm, #confirm-dialog a.confirm').click(function (e) {
         e.preventDefault();

         confirm("You are inactive for a while continue?", function () {});
     });
});

function confirm(message, callback) {
     $('#confirm').modal({

    position: ["20%",],
    overlayId: 'confirm-overlay',
    containerId: 'confirm-container', 
    onShow: function (dialog) {
            var modal = this;

    $('.message', dialog.data[0]).append(message);

         // if the user clicks "yes"
                 $('.yes', dialog.data[0]).click(function () {
         c=0; //Reset the clock to 0

         // close the dialog
         modal.close(); // or $.modal.close();
    });

    // if the user clicks "no"
    $('.no', dialog.data[0]).click(function () {
        //Call the logout page and close the window.
        window.location.href = 'logout.asp';
        // close the dialog
        modal.close(); // or $.modal.close();
    });
    }
     });
   }

   </script>

Can you post a live example somewhere? Try [jsFiddle](http://jsfiddle.net) if your site isn't online. — Chris, Aug 19 '12 at 16:58
@Abody97 here is a link to see it live. http://www.wotts.org/auto_logout.asp — Frank G., Aug 19 '12 at 17:06
@Abody97 I was able to get it to show but the CSS isn't working just shows the text now. It should look like this http://www.ericmmartin.com/projects/simplemodal-demos/ Click on the Confirm DEMO to see what it should look like! Thanks! — Frank G., Aug 19 '12 at 17:07
If you want to check for inactivity you should look to the second answer here http://stackoverflow.com/questions/667555/detecting-idle-time-in-javascript-elegantly — Lautaro, Aug 19 '12 at 17:09

Chris · Accepted Answer · 2012-08-19T17:17:44.650

1

The issue that causes the CSS not to be applied correctly is that your container has the wrong ID -- different than the one in CSS. Either change #confirm-container in your simplemodal/css/confirm.css file to #confirm, or change <div id='confirm'> in your HTML to <div id = 'confirm-container'>.

That should fix your issue -- hope that helped!

edited Aug 19 '12 at 17:17

answered Aug 19 '12 at 17:12

Chris

26,544
5
58
71

I changed to
– Frank G. Aug 19 '12 at 17:22
@FrankG. You want the box centered both vertically and horizontally? – Chris Aug 19 '12 at 17:25
@FrankG. If I understood correctly, try adding the following to line 20 of your `confirm.css` inside `#confirm-container`: `z-index: 1003; position: absolute; top: 50%; left: 50%; margin-top: -70px; margin-left: -210px;`. Now also the buttons should work. – Chris Aug 19 '12 at 17:33
I changed the code back to the old try it now. This is how it should work http://www.wotts.org/auto_logout.asp but I want to take out the demo link and have it popup without that the exact same way it does now – Frank G. Aug 19 '12 at 17:35
This is the code I don't want to be in `
Demo
` – Frank G. Aug 19 '12 at 17:35
Sorry added the wrong link try this now and you will see http://www.wotts.org/auto_logout.asp – Frank G. Aug 19 '12 at 17:36
@FrankG. Well, I see. What's the issue when removing the "demo" link? – Chris Aug 19 '12 at 17:39
I removed the demo link and changed the call from `$("#confirm").click();` to `$("#confirm").modal();`. Notice that it shows the text but not the css in the middle? – Frank G. Aug 19 '12 at 17:42
@FrankG. First notice that you're closing the `` before adding the style sheets: ``. That's generically not very good. – Chris Aug 19 '12 at 17:45
Sorry about that. That was me experimenting. I changed it back to putting the css and js in the header. here http://www.wotts.org/auto_logout.asp – Frank G. Aug 19 '12 at 17:51
@FrankG. `containerId: 'confirm-container'` -- you don't have such an element. – Chris Aug 19 '12 at 17:59
that's fine! It works you saw it right? I just want to remove the DEMO link so it will open the window just like the demo link was there and show a working confirm box. Do you know what I need to have this happen? – Frank G. Aug 19 '12 at 18:03
@FrankG. let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/15538/discussion-between-abody97-and-frank-g) – Chris Aug 19 '12 at 18:05
Here is the working page with the DEMO link in. How can I remove the demo link and have the confirm popup just the way it does with the demo link: http://www.wotts.org/auto_logout.asp – Frank G. Aug 19 '12 at 18:05
At the end we just removed the demo in the hyper link leaving the link as is and that worked fine. Thank you Abody97 – Frank G. Aug 19 '12 at 18:13

Simple Modal Auto Logout

1 Answers1