Q:

How to remove x button from jquery plugin

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>

A:

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

