Question

我正在尝试使用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>

Answer 1

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

那应该解决你的问题 - 希望有所帮助！

简单模态自动注销

1 个答案: