Trying to create a jQuery UI modal dialog without a close option

问题

I have a modal dialog that appears over a page that shouldn't be accessed but should still be seen from outside of the modal dialog. I have everything working perfectly except for two problems:

• As soon as the modal dialog appears, the link within it is automatically focused, so there is a blue box around it (just like with any element onto which I am focused), but I don't want this behavior.
• Also, there is an X button to allow the user to close the dialog, and I want to get rid of it.

Any help?

回答1:

To prevent a jQuery UI dialog from ever being closed:

1. set the option closeOnEscape to false:

   $(dlg).dialog('option', 'closeOnEscape', false);

2. remove its close button just after creation:

   $(dlg).parent().find('a.ui-dialog-titlebar-close').remove();

3. register a NOOP beforeclose handler:

   $(dlg).bind('dialogbeforeclose', false);

#1 and #3 can also be done during creation, of course.

回答2:

for the 2nd point, try this:

1- Navigate through your jQuery-UI CSS file and find this class

.ui-dialog .ui-dialog-titlebar-close

2- Modify this class so the Close button will not show, just replace it with the following:

.ui-dialog .ui-dialog-titlebar-close { disply:none; position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }

I just added a new property (Display:none) to make sure the button is not visible to the end user.

let me know if this helped, thanks.

来源：https://stackoverflow.com/questions/5438537/trying-to-create-a-jquery-ui-modal-dialog-without-a-close-option