Question

根据我的要求，我正在使用自定义警报，经过研究后我根据需要找到了这两个

理想的超时时间

http://www.erichynds.com/jquery/a-new-and-improved-jquery-idle-timeout-plugin/

弹出

http://www.clientsideasp.net/2009/06/16/showing-beautiful-message-boxes-in-aspnet-web-forms-using-jquery-impromptu/#comment-209

结合这两个我的设计如下

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs" Inherits="Default5" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Untitled Page</title>
    <link href="impromptu/impromptu.css" rel="stylesheet" type="text/css" />
    <script src="impromptu/jquery.js" type="text/javascript"></script>
    <script src="impromptu/jquery-impromptu.2.6.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"
        type="text/javascript"></script>
    <link href="jquery-ui.css" type="text/css" rel="stylesheet" />
    <script src="Timer.js" type="text/javascript"></script>
    <script src="idletimeout.js" type="text/javascript"></script>
    <style type="text/css">
        html, body
        {
            margin: 0;
            padding: 0;
            font: 12px Helvetica, Arial, sans-serif;
        }
        #content
        {
            padding: 10px;
        }
        a
        {
            color: #477099;
        }

        #bar
        {
            background: #252823;
            padding: 5px 10px;
            border-bottom: 4px solid #C3D3DA;
        }
        #bar h1
        {
            margin: 0;
            padding: 0;
            color: #fff;
            font-size: 40px;
            letter-spacing: -1px;
            text-shadow: 0 0 4px #000000;
        }
        #bar h1 span
        {
            color: #C3D3DA;
        }
        #bar div
        {
            float: right;
            margin-top: -50px;
            padding: 20px 20px 0 0;
        }
        #bar a
        {
            color: #fff;
            text-decoration: none;
        }
        #bar div a:hover
        {
            text-decoration: underline;
        }
    </style>
    <script language="javascript" type="text/javascript">

        function confirmSubmit() {
            var inputs = document.getElementsByTagName("input");
            var flag = 0;
            for (var i = 0; i < inputs.length; i++) {
                if (inputs[i].type == "checkbox") {
                    if (inputs[i].checked) {
                        flag = 1;
                        break;
                    }
                }
            }
            if (flag == 0) {
                $.prompt('Select One?'
            , {
                buttons: { Ok: true }
            }
                );
            }
            else {
                $.prompt('Are you sure you want to submit?'
            , {
                buttons: { Ok: true, Cancel: false }
                , callback: confirmSubmitResult
            }
        );
            }
            return false;
        }

        function confirmSubmitResult(v, m, f) {
            if (v) //post back if the user clicked OK
                $('#<%= btnSubmit.ClientID %>').click();
        }    
    </script>
    <style type="text/css">
        a.ui-dialog-titlebar-close
        {
            display: none;
        }
    </style>
    <script type="text/javascript">
        // setup the dialog
        $("#demo").dialog({
            autoOpen: false,
            modal: true,
            width: 400,
            height: 200,
            closeOnEscape: false,
            draggable: false,
            resizable: false,
            buttons: {
                'Yes, Keep Working': function () {
                    $(this).dialog('close');
                },
                'No, Logoff': function () {
                    // fire whatever the configured onTimeout callback is.
                    // using .call(this) keeps the default behavior of "this" being the warning
                    // element (the dialog in this case) inside the callback.
                    $.idleTimeout.options.onTimeout.call(this);
                }
            }
        });

        // cache a reference to the countdown element so we don't have to query the DOM for it on each ping.
        var $countdown = $("#dialog-countdown");

        // start the idle timer plugin
        $.idleTimeout('#demo', 'div.ui-dialog-buttonpane button:first', {
            idleAfter: 5,
            pollingInterval: 2,
            keepAliveURL: 'keepalive.php',
            serverResponseEquals: 'OK',
            onTimeout: function () {
                window.location = "Handler.ashx";
            },
            onIdle: function () {
                $(this).dialog("open");
            },
            onCountdown: function (counter) {
                $countdown.html(counter); // update the counter
            }
        });



    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div id="demo" style="display: none;" title="Your session is about to expire!">
            <p>
                <span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 50px 0;"></span>
                You will be logged off in <span id="dialog-countdown" style="font-weight: bold">
                </span>seconds.
            </p>
            <p>
                Do you want to continue your session?</p>
        </div>
        <h1>
            Keep Idle for 5 Seconds</h1>
        Name:
        <asp:TextBox runat="server" ID="txtName" />
        <br />
        <br />
        <asp:CheckBox ID="chk" runat="server" Text="Check" />
        <asp:CheckBox ID="CheckBox1" runat="server" Text="Check" />
        <!-- The button which will display the delete confirmation -->
        <input type="button" onclick="return confirmSubmit();" value="Submit" />
        <!-- Hidden command button that actually issues the delete -->
        <asp:Button runat="server" ID="btnSubmit" Style="display: none;" OnClick="btnSubmit_Click" />
        <!-- Explanation -->
    </div>
    </form>
</body>
</html>

但警报未按照我的要求显示。任何人都可以帮助我..

单击按钮时出错

enter image description here

Answer 1

开始删除许多jQuery加载。我看到你在3分上加载jQuery !!!，删除两个......

第58行

<script src="impromptu/jquery.js" type="text/javascript"></script>

第104行

 <script src="impromptu/jquery.js" type="text/javascript"></script>

第135行

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>

然后在顶部添加所有加载脚本。你也加载了相同的jQuery ui css。请进行此更正，看看是否可以工作或关注一些真正的问题。还要检查javscript错误控制台，确保你准备好几十个错误。

复制/粘贴代码时，至少要看一下。

组合Impromptu和Ideal time插件时的问题

1 个答案: