We have a custom model dialog control that we use for all popups on our web pages. When this dialog is initialized, we use jQuery expose to gray out the rest of the page. To prevent selection on the grayed-out area, we apply the following styles to the mask div:
-moz-user-focus: ignore;
-moz-user-select: none;
-webkit-user-select: none;
-khtml-user-select: none;
-o-user-select: none;
user-select: none;
Pressing the 'esc' key on the dialog closes it, and pressing 'enter' key is equivalent to clicking on ok or yes button. However, in Firefox, the above CSS prevents focus from being set on any control in the grayed out area when the user clicks on it. For IE, we handle this programmatically as follows:
$('#exposeMask').attr("contenteditable", "false");
$('#exposeMask').attr("unselectable", "on");
Unfortunately, in Chrome, the -webkit-user-select CSS property prevents selection but does not help prevent focus. I have searched Google for a solution but could not find any helpful links. Is there a Chrome equivalent to -moz-user-focus that I can use?
Thank you in advance, M