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 a x 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>

"syntax error line 1 in jquery.idletimeout.js" suggests that you're using minimized versions of the JavaScript, debugging minimized JavaScript is little more than an exercise in frustration. What happens if you use the non-minimized versions? — mu is too short, Jun 03 '12 at 19:05
@muistooshort what do ou mean by minimized and non-minimized versions? — user1394925, Jun 03 '12 at 19:06
[Line 1 of `jquery.idletimeout.js`](https://github.com/ehynds/jquery-idle-timeout/blob/master/src/jquery.idletimeout.js#L1) is a comment, I doubt the syntax error is there. Minimizing JavaScript removes comments and whitespace to reduce the file size, the result is typically one long line of JavaScript. — mu is too short, Jun 03 '12 at 19:15
I have minimize javascript by removing the comments but no difference — user1394925, Jun 03 '12 at 19:20
I'm guessing you included jQuery AFTER idletimeout... Just guessing... jQuery has gotta go first — Kyle Macey, Jun 03 '12 at 19:24
@user1421767 next time open a new question, don't completely revamp with an edit. It makes comments and answers confusing when the entire scope of the question changes — Kyle Macey, Jun 04 '12 at 15:45

score 1 · Accepted Answer · edited May 23 '17 at 10:09

1

Yoou can hide the X when opening the dialog.

$("#div2").dialog({
   closeOnEscape: false,
   open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); }
});

Here is the original SO question and answer

edited May 23 '17 at 10:09

Community

1
1

answered Jun 04 '12 at 00:14

flynfish

5,857
3
24
33

score 0 · Answer 2 · answered Jan 31 '14 at 13:54

0

Or simply put a

<style>
     .ui-dialog-titlebar-close { display: none ; }
</style>

answered Jan 31 '14 at 13:54

Taz

78
6

How to remove x button from jquery plugin

2 Answers2