How to remove x button from jquery plugin
Question
I have an application here where if you don't do anything for about 20 seconds, it will display a idle timeout plugin message stating if you want to continue or log off.
The problem is that it displays ax button on the top button of the corner and if the user clicks on the x button, the message goes but in the tab the timer still continues.
So what my question is that how can I remove the x button in the top corner of the message?
Below is the code for the application:
<head>
<script type="text/javascript">
$(document).ready(function()
{
$("#dialog").dialog({
autoOpen: false,
modal: true,
width: 400,
height: 200,
closeOnEscape: false,
draggable: false,
resizable: false,
buttons: {
'Yes, Keep Working': function(){
// Just close the dialog. We pass a reference to this
// button during the init of the script, so it'll automatically
// resume once clicked
$(this).dialog('close');
},
'No, Logoff': function(){
// fire whatever the configured onTimeout callback is.
$.idleTimeout.options.onTimeout.call(this);
}
}
});
$.idleTimeout('#dialog', 'div.ui-dialog-buttonpane button:first', {
idleAfter: 5, // user is considered idle after 5 minutes of no movement
pollingInterval: 60, // a request to keepalive.php (below) will be sent to the server every minute
onTimeout: function(){
// redirect the user when they timeout.
window.location = "timeout.htm";
},
onIdle: function(){
// show the dialog when the user idles
$(this).dialog("open");
},
onCountdown: function(counter){
// update the counter span inside the dialog during each second of the countdown
$("#dialog-countdown").html(counter);
},
onResume: function(){
// the dialog is closed by a button in the dialog
// no need to do anything else
}
});
});
</script>
</head>
<body>
<div id="dialog" title="Your session is about to expire!">
<p>You will be logged off in <span id="dialog-countdown"></span> seconds.</p>
<p>Do you want to continue your session?</p>
</div>
</body>
</html>
2 answers
solution1
1 ACCPTED 2012-06-04 00:14:31
Yoou can hide the X when opening the dialog.
$("#div2").dialog({
closeOnEscape: false,
open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); }
});
solution2
0 2014-01-31 13:54:58
Or simply put a
<style>
.ui-dialog-titlebar-close { display: none ; }
</style>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.