Disable 'X' button in top-right of Dialog

I'm assuming you are using jQuery UI.

If so, attach a beforeClose event handler and return false from it if the Agree button hasn't been clicked. You can also use CSS to set the X button to {display: none}

var agreed = false; //has to be global
$("something").dialog({
    buttons: {
        'Apply': function () {
            agreed = true;
            $(this).dialog("close");
        }
    },
    beforeClose: function () {
        return agreed;
    }
});

If your dialog is a regular popup window, it is not possible to prevent the user from closing the window.

You could use a jQuery modal dialog plugin, such as jqModal.

Note, however, that you cannot prevent the user from closing the main window either.

EDIT: If you're using the jQuery UI dialog, you could add the following CSS rule:

#someId .ui-dialog-titlebar-close {
    display: none;
}

You shouldalso set the closeOnEscape to false.

Also, why are you forcing the user to click I Agree?
Why can't you treat a closed window as if the you disagreed?

As far as your task of disallowing the user to click the X, I would recommend one of a few approaches:

1. use a CSS rule to set the display for that button to 'none'. Using Firebug's Inspect mode, you should be able to look at the tag that the jQuery UI dialog places there and add a CSS rule for it. If it's display is none, the user shouldn't be able to click it.
2. Similarly, attach a jQuery .click() event that does nothing, and returns false to stop the event propagation (I have never actually done this one, but it should work).
3. You could attach a function to the dialog's beforeClose() event that would allow you to prevent the dialog from closing if the user hadn't clicked "I Agree"
4. Most complicated of all, but useful if you want to have similar dialogs or make other functional changes, you could subclass the jQuery UI dialog by creating a jQuery UI plugin that internally instantiates the dialog then modifies the default behavior by applying CSS rules or attaching events as described above.

Hope one of those gets you going in the right direction...

I add had a related issue: do a reload after user clicks the X to close in a specific dialog window, no reload in other windows. I added to jQuery dialog function in .js:

.click(function(i){ jQuery('span.ui-dialog-title').each(function(index) {


    if (jQuery(this).text() == '/**Title String Here**/') {

        a.close(i); location.reload(true); 

    } else {

        a.close(i);
    }

  });
return false})

This looks for the title in the span text, and does reload upon close, otherwise close with no reload.

If you're using alert, perhaps you should consider confirm instead:

if (!confirm("Click OK to confirm that you agree to the terms and conditions.")) {
    // they didn't click OK
} else {
    // they did.
}

Or, use a plugin like SLaks mentioned