简单的模式自动注销



我正在尝试使用 js 计时器和 jquery 确认模式制作一个自动注销页面。一切正常,除了当计时器达到 2 秒时它不会打开模态。这是代码。谁能告诉我我做错了什么?

<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>
导致 CSS

无法正确应用的问题是您的容器具有错误的 ID - 与 CSS 中的 ID 不同。将 simplemodal/css/confirm.css 文件中的#confirm-container更改为 #confirm ,或将 HTML 中的 <div id='confirm'>更改为 <div id = 'confirm-container'>

这应该可以解决您的问题 - 希望有帮助!

最新更新