As per my requirement i am working with custom alerts, after a research i found these two as per my need
For ideal time out
http://www.erichynds.com/jquery/a-new-and-improved-jquery-idle-timeout-plugin/
For Pop up
http://www.clientsideasp.net/2009/06/16/showing-beautiful-message-boxes-in-aspnet-web-forms-using-jquery-impromptu/#comment-209
Combining these two my design is as follows
<%@ 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>
<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 src="impromptu/jquery.js" type="text/javascript"></script>
<script src="impromptu/jquery-impromptu.2.6.min.js" type="text/javascript"></script>
<link href="impromptu/impromptu.css" rel="stylesheet" type="text/css" />
<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>
<link href="jquery-ui.css" type="text/css" rel="stylesheet" />
<style type="text/css">
a.ui-dialog-titlebar-close
{
display: none;
}
</style>
</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>
<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>
<script src="Timer.js" type="text/javascript"></script>
<script src="idletimeout.js" type="text/javascript"></script>
<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>
</body>
</html>
But the alerts are not getting displayed as per my requirement. Can any one help me..
