TransModal modal dialog project : beta testing

[VK]

In the continuation of the discussion at "Making Site Opaque -- This
Strategy Feasible?" and my comment at
http://groups.google.com/group/comp.lang.javascript/msg/b515a4408680e8e2

I have realized that despite suggestions to use DHTML-based modal
dialogs are very common? there is not a single fully functional
reliable copyright-free cross-browser alternative to say MsgBox
(VBScript) or showModalDialog (IE). This way such suggestions up to
date are bearing rather a lot of hypocrisy by suggesting to use
something non-existing instead of something existing.

I am proposing to make TransModal library under MIT license to have a
good alternative to suggest. I also would like to have this library
novice-friendly for code studying, as I said before.

I am proposing the current v. 0.0.3 beta for criticism and for bug fix
in cope that it may be interesting for anyone to donate their time to
participate.

The whole package can be obtained at
http://www.geocities.com/schools_ring/transmodal/TransModal_0_0_3.zip

The package contains:
0_0_3_Compat.html - testing page in Compatibility (BackCompat) mode
0_0_3_Strict.html - testing page in Strict (CSS1Compat) mode
TransModal.js - the version 0.0.3 beta itself

The TransModal.js code is also posted below. Usenet post formatting
specifics forced me to make line breaks in some long statements where
I would not do them otherwise. If still some lines get broken so
rendering the code non-functioning or hard to read then I have nothing
to say but my apologies. Use the source from the linked package
instead then.



/********************************************
* ATTENTION!
* This version TransModal 0.0.3 is intended
* for testing and debugging purpose only.
* It is NOT intended for a practical use.
********************************************/



function TransModal() {



/* Enforcing TransModal to be a singleton:
* other words do not allow to create new
* instances of TransModal class.
*
*? Objections?
*/

if (this instanceof TransModal) {
return TransModal;
}



/* Checking if not some weird environment
* where window host object is not available.
* It is here mostly to pacify some c.l.j.
* regulars - but who knows, it may come useful
* someday somewhere.
*
* "window" identifier is reserved for the host
* object. This way if typeof window == 'object'
* guarantees that either 1) host object is here
* or 2) it is not here but someone is
* emulating it. In the latter case it is not
* our concern how good or bad such emulation is.
*/

if (typeof window != 'object') {
return null;
}



/* Check if DOM manipualtions are available:
* other words if the document is loaded.
* If not then postpone the execution till
* after window load event.
* TransModal.isIE flag is preset on conditional
* compilation outside of the TransModal body:
* look at the end of this code.
*/

if (document.body == null) {
if (TransModal.isIE) {
window.attachEvent('onload', TransModal);
}
else {
window.addEventListener('load', TransModal, false);
}
return null;
}



/* If TransModal was already once executed
* then do not repeat the initialization.
*/
if (TransModal.isExecuted) {
return null;
}
else {
TransModal.isExecuted = true;
}



/* If "modal" identifier is not already in use,
* then set it as a shortcut alias for TransModal.
* This way TransModal.dialog() and modal.dialog()
* calls will be equivalent.
*/

if (typeof modal == 'undefined') {
modal = TransModal;
}



/* Prototype.js compatibility.
* If global $() function is already defined
* then do not override it. Otherwise making
* a lightweight replacement of it.
*
* We don't want a parasite closure in here,
* so we are using Function constructor.
*/
if (typeof $ != 'function') {
$ = new Function('id',
'return document.getElementById(id)');
}



/* It would be nice to have button labels on
* user's preferred language and not English
* only.
* navigator.userLanguage (IE) and
* navigator.language (some other UAs) values
* may have different meanings: OS language,
* or browser interface language, or the preferred
* language in the browser settings. Either way
* IMHO it still allows to make a good guess what
* language the current user would like to see.
* If the detected language is not implemented yet
* then English is used by default.
* For such basic lexicon as "Yes", "No", "Cancel" etc.
* we may disregard country-specific variations, so we
* are taking only two first letters from the language
* code - so say "en", "en_US", "en_GB" will be "en".
*
*? Objections?
*/

if ('userLanguage' in navigator) {
var lang = navigator.userLanguage.substring(0,2);
}
else if ('language' in navigator) {
var lang = navigator.language.substring(0,2);
}
else {
var lang = 'en';
}

TransModal.lang = (lang in TransModal.buttonLabelSet) ?
lang : 'en';



/* Creating and adding dialog window template.
* Additional dialog styling may be applied
* over DIV#TransModalDialog CSS rule set.
*/

var wndDialog = document.createElement('DIV');

wndDialog.id = 'TransModalDialog';

/* Some complex styling of a completely empty element
* may make IE to act strange. To avoid that we are
* setting the default content to NO-BREAK SPACE
*/
wndDialog.innerHTML = '<span>\u00A0</span>';

with (wndDialog.style) {
position = 'absolute';
zIndex = '1002';
left = '0px';
top = '0px';
cursor = 'default';
visibility = 'hidden';
}

document.body.appendChild(wndDialog);



/* Creating and adding the cover sheet.
* The cover sheet is NOT supposed to
* be styled by external CSS rules. All
* what it needs is being made by script.
*/

var wndCover = document.createElement('DIV');

wndCover.id = 'TransModalVeil';

wndCover.innerHTML = '<span>\u00A0</span>';

with (wndCover.style) {
position = 'absolute';
zIndex = '1001';
left = '0px';
top = '0px';
margin = '0px 0px';
padding = '0px 0px';
borderStyle = 'none';
cursor = 'not-allowed';
visibility = 'hidden';
}

/* Pre-apply alpha filter for IE.
*/
if (TransModal.isIE) {
wndCover.style.filter = ''.concat(
'progidXImageTransform.Microsoft.Alpha(Opacity=',
Math.floor(TransModal.coverOpacity * 100), ',Style=0)');
}

document.body.appendChild(wndCover);
}



/************** TransModal methods **************/



/* TransModal.dialog() method that
* takes four optional arguments:
*
* dlgPrompt : prompt HTML code
* dlgButtonSet : button set
* dlgDefaultButton : default focus
* dlgListener : function to call
*/

TransModal.dialog = function(dlgPrompt,
dlgButtonSet,
dlgDefaultButton,
dlgListener) {

/* Setting defaults for missing arguments.
*/

if (typeof dlgPrompt != 'string') {
dlgPrompt = '<p>TransModal v.'.concat(
TransModal.reportVersion(), '</p>');
}

if (typeof dlgButtonSet != 'number') {
dlgButtonSet = 0;
}

if ((typeof dlgDefaultButton != 'number') ||
(dlgDefaultButton >= TransModal.
buttonSet[dlgButtonSet].length)) {
dlgDefaultButton = 0;
}

if (typeof dlgListener != 'function') {
TransModal.notifyObserver = TransModal.loopHole;
}
else {
TransModal.notifyObserver = dlgListener;
}



/* Intermediary variables to store
* clientWidth and clientHeight values.
*/

var w = document.documentElement.clientWidth;
var h = document.documentElement.clientHeight;



/* Setting the cover.
*/

var cover = $('TransModalVeil');

/* BUG bug 1
*
* We need a reliable algorithm to cover
* entire body, not just visible part of it
* like this current primitive does.
*/
cover.style.width = w + 'px';
cover.style.height = h + 'px';

cover.style.backgroundColor = TransModal.coverColor;

/* Working around different opacity models
* of IE and other browsers.
*/
if (TransModal.isIE) {
cover.filters.item('DXImageTransform.Microsoft.Alpha').
Opacity = Math.floor(TransModal.coverOpacity * 100);
}
else {
/* Safari requires opacity to be a string and it
* ignores numeric arguments.
* Other browsers accept either.
*/
cover.style.
opacity = '' + TransModal.coverOpacity;
}



/* Preparing the dialog.
*/

var dialog = $('TransModalDialog');

/* How many buttons in the selected set.
*/
var len = TransModal.buttonSet[dlgButtonSet].length;

/* We want all buttons in one row.
*/
var buttons = '<div style="white-space:nowrap !important">';

/* BUG bug 2
* Clicking outside of dialog makes current button
* to loose focus.
*/

/* BUG bug 3
* Navigating by TAB press goes away from the
* rightmost button to the document body.
* Must be switching to the leftmost button
* instead.
*/

/* BUG bug 4
* Arrow keys navigation doesn't work.
*/

for (var i=0; i<len; i++) {
var label = TransModal.buttonLabelSet[TransModal.lang][
TransModal.buttonSet[dlgButtonSet]];
buttons+= ''.concat(
'<button type="button" ',
'hidefocus ', // removes dotted focus from IE button labels
'onclick="TransModal.dismiss(\'',
TransModal.buttonSet[dlgButtonSet], '\')">', label, '</button>
');
}

buttons+= '</div>';

dialog.innerHTML = dlgPrompt + buttons;

/* BUG bug 5
* Scroll position is not accounted.
*/

dialog.style.left = Math.floor((w-dialog.offsetWidth)/2) + 'px';
dialog.style.top = Math.floor((h-dialog.offsetHeight)/2) + 'px';

/* IE6 or older "Super Z of form elements" quirk fix.
* Until IE7 form controls were external DirectX objects
* drawn on a separate graphics layer after the whole
* page is drawn. That led to impossibility to cover
* some form controls (particularly SELECT) by a higher
* z-index DOM elements: form controls remained visible
* and accessible (hence the term; sometimes also
* referred as "firing through").
* As a partial and not perfect remedy we are disabling
* all form controls for IE6 or older.
* For extra large or multiple forms it may have
* a productivity impact.
* It also doesn't eliminate the risk of the dialog placed
* right over a form element thus partically overdrawn.
*/

/* BUG bug 6
* Doesn't account if some form controls are already
* disabled for some other purpose. This way on restoring
* their state will be overriden.
*/

if (TransModal.isOldIE) {
for (var i=0; i<document.forms.length; i++) {
var len = document.forms.length;
for (var j=0; j<len; j++) {
/* IE considers links located within FORM as form
* controls, so it disables them as well.
* No extra check for links is added though to
* speed up the loop.
*
*? You think?
*/
document.forms.elements[j].disabled = true;
}
}
}



/* Display both the cover and the dialog.
*/
cover.style.visibility = 'visible';
dialog.style.visibility = 'visible';



/* Setting focus to the default button.
*/
window.setTimeout("$('TransModalDialog')." +
"getElementsByTagName('BUTTON')[" +
dlgDefaultButton + "].focus()", 100);

};

/*** END OF TransModal.dialog FUNCTION ***/



TransModal.dismiss = function(pressedButtonSysName) {

$('TransModalDialog').style.visibility = 'hidden';
$('TransModalVeil').style.visibility = 'hidden';

if (TransModal.isOldIE) {
for (var i=0; i<document.forms.length; i++) {
var len = document.forms.length;
for (var j=0; j<len; j++) {
/* see bug 6 */
document.forms.elements[j].disabled = false;
}
}
}

TransModal.notifyObserver(pressedButtonSysName);

}

/*** END OF TransModal.dismiss FUNCTION ***/



/* Library versioning
*/

TransModal.MajorVersion = 0;
TransModal.MinorVersion = 0;
TransModal.BuildVersion = 3;

TransModal.reportVersion = function() {
return ''.concat(
TransModal.MajorVersion,
'.', TransModal.MinorVersion,
'.', TransModal.BuildVersion);
}



/* "If TransModal initialized" flag
*/

TransModal.isExecuted = false;



/* A dummy function for testing and for NOOPs.
*/

TransModal.loopHole = function() {
window.alert(arguments[0] || 'no arguments');
}



/* Current cover color (black by default).
*/

TransModal.coverColor = 'rgb(0,0,0)';



/* Current cover opacity (0.0 - 1.0)
* 0 - fully transparent
* 1 - fully opaque
*/

TransModal.coverOpacity = 0.4;



/* In the future may be used to set
* cover appearence effects:
* 'none' - no effect
* 'fade' - fading
* 'flood' - flooding
*
* Not currently implemented.
*/

TransModal.coverEffect = 'none';



/* Button labels by language codes.
*
* For the best interoperability
* all characters above US-ASCII
* should be represented by Unicode
* escape sequences \uXXXX
*
* Currently only English is presented.
*/

TransModal.buttonLabelSet = {
'en' : {
'OK' : 'OK'
,'Cancel' : 'Cancel'
,'Abort' : 'Abort'
,'Retry' : 'Retry'
,'Ignore' : 'Ignore'
,'Yes' : 'Yes'
,'No' : 'No'
}
};



/* Available button sets. The sets
* are going by VB's MsgBox schema.
* These are system label names and
* they DON'T need to be translated.
*/
TransModal.buttonSet = [
['OK']
,['OK', 'Cancel']
,['Abort','Retry','Ignore']
,['Yes','No','Cancel']
,['Yes','No']
,['Retry','Cancel']
];



/* Conditional compilation.
* We all hate browser sniffing, do we ?
*/
/*@cc_on @*/
/*@if (@_jscript)
TransModal.isIE = true;
TransModal.isOldIE = ''.concat(
ScriptEngineMajorVersion(), '.',
ScriptEngineMinorVersion(), '.',
ScriptEngineBuildVersion()) <= '5.6.8834';
@else @*/
TransModal.isIE = false;
TransModal.isOldIE = false;
/*@end @*/



/* Attempting to execute TransModal function.
*/

TransModal();



/* BUG bug 7
* The whole script is completely
* broken for IE in BackCompat mode.
*/

 

[Laser Lips]

I'm currently working on a modal dialog box at work because all the
ones I have seen all have somthing wrong with them.

Hopefully it will be ready by the end of this week....watch this
space....

Graham

 

[VK]

I'm currently working on a modal dialog box at work because all the
ones I have seen all have somthing wrong with them.

Hopefully it will be ready by the end of this week....watch this
space....

The competition is always good ;-)

 

[Matthias Watermann]

[...]

Just some hints after reading (w/o testing) it:

if ('userLanguage' in navigator) {
var lang = navigator.userLanguage.substring(0,2);
}
else if ('language' in navigator) {
var lang = navigator.language.substring(0,2);
}
else {
var lang = 'en';
}

Should be:

var lang = 'en';
if ('userLanguage' in navigator) {
lang = navigator.userLanguage.substring(0,2);
}
else if ('language' in navigator) {
lang = navigator.language.substring(0,2);
}

TransModal.lang = (lang in TransModal.buttonLabelSet) ?
lang : 'en';

I'd assume that "lang" is unknown here since there are only three
vars with that name each of which inside a different "if"-scope.

[...]
var wndDialog = document.createElement('DIV');

wndDialog.id = 'TransModalDialog';

/* Some complex styling of a completely empty element
* may make IE to act strange. To avoid that we are
* setting the default content to NO-BREAK SPACE
*/
wndDialog.innerHTML = '<span>\u00A0</span>';

Why use "innerHTML" (instead of "createElement()") here?

with (wndDialog.style) {
position = 'absolute';
zIndex = '1002';
left = '0px';
top = '0px';
cursor = 'default';
visibility = 'hidden';
}

Just a matter of style & opinion:

var s;
if ((s = wndDialog.style)) {
s.position = 'absolute';
s.zIndex = '1002';
s.left = '0px';
s.top = '0px';
s.cursor = 'default';
s.visibility = 'hidden';
}

[...]
var wndCover = document.createElement('DIV');

wndCover.id = 'TransModalVeil';

wndCover.innerHTML = '<span>\u00A0</span>';

see above.

with (wndCover.style) {
position = 'absolute';
zIndex = '1001';
left = '0px';
top = '0px';
margin = '0px 0px';
padding = '0px 0px';
borderStyle = 'none';
cursor = 'not-allowed';
visibility = 'hidden';
}

Same as above.

[...]
dialog.innerHTML = dlgPrompt + buttons;

Same as above.


--
Matthias
/"\
\ / ASCII RIBBON CAMPAIGN - AGAINST HTML MAIL
X - AGAINST M$ ATTACHMENTS
/ \

 

[Henry]

On May 6, 3:01 pm, Matthias Watermann wrote:

I'd assume that "lang" is unknown here since there are
only three vars with that name each of which inside a
different "if"-scope.

Javascript is not block-scoped. Its scoping units are functions, so
any variable declared at any point within a function body is declared
for the entire execution of that function (including any code that
precedes the declaration in the source text).

 

[Jorge]

Javascript is not block-scoped. Its scoping units are functions, so
any variable declared at any point within a function body is declared
for the entire execution of that function (including any code that
precedes the declaration in the source text).

e.g.

<html><head></head><body><script>

ka="global ka";
(function () {
alert(ka);
var ka = "local ka";
alert(ka);
})();

</script></body></html>

 

[Jorge]

In the continuation of the discussion at "Making Site Opaque -- This
Strategy Feasible?" and my comment at
http://groups.google.com/group/comp.lang.javascript/msg/b515a4408680e8e2

I am proposing the current v. 0.0.3 beta for criticism and for bug fix
in cope that it may be interesting for anyone to donate their time to
participate.

Hey, why did you left out those nice faders() ?

--Jorge.

 

[VK]

Hey, why did you left out those nice faders() ?

I did not! Look at TransModal.coverEffect - it is waiting for its
moment. It is just necessary to make working properly the most basic
functionality before starting with extra features. It like a car:
before bringing it to West Cost Custom it must be able to at least
leave the garage by its own

 

[VK]

[...]

Just some hints after reading (w/o testing) it:

if ('userLanguage' in navigator) {
var lang = navigator.userLanguage.substring(0,2);
}
else if ('language' in navigator) {
var lang = navigator.language.substring(0,2);
}
else {
var lang = 'en';
}

Should be:

var lang = 'en';
if ('userLanguage' in navigator) {
lang = navigator.userLanguage.substring(0,2);
}
else if ('language' in navigator) {
lang = navigator.language.substring(0,2);
}

with pending else{} left this way. Not a crime of any kind and often
met, but we have here a standard logical construct
if X then do this
else if Y then do that
(if neither of both then)
else do default

which is

if (X) {}
else if (Y) {}
else {}

what would be benefits to break the logic flow? I am not claiming that
there are not any, but what are they?

I'd assume that "lang" is unknown here since there are only three
vars with that name each of which inside a different "if"-scope.

Variable scope in Javascript was already explained by other posters as
I see.

[...]
var wndDialog = document.createElement('DIV');

wndDialog.id = 'TransModalDialog';

/* Some complex styling of a completely empty element
* may make IE to act strange. To avoid that we are
* setting the default content to NO-BREAK SPACE
*/
wndDialog.innerHTML = '<span>\u00A0</span>';

Why use "innerHTML" (instead of "createElement()") here?

because then we have to add TextNode into it which is a royal pain in
IE6 - not talking about adding form controls this way which is a
headache beyond tolerance IMO with IE. Also innerHTML is 10-15 times
quicker then per-node manipulations.
This being said, I am ready to replace both innerHTML usages by a
reliable DOM alternative if anyone has it.

Just a matter of style & opinion:

var s;
if ((s = wndDialog.style)) {
s.position = 'absolute';
s.zIndex = '1002';
s.left = '0px';
s.top = '0px';
s.cursor = 'default';
s.visibility = 'hidden';
}

Yeah... "To WITH, or not to WITH"
Javascript WITH implementation is indeed a ticking bomb to handle with
extreme care. I myself once was a complete fool with it:
http://groups.google.com/group/mozilla.dev.tech.svg/msg/e3ef5a71b7d95318

So I do agree with Matt Kruse at
http://www.javascripttoolbox.com/bestpractices/#with
as overall - but I do not agree to make WITH as some self-contained
evilness that acts by its own no matter what In case as above
is .style is available then all these properties should be here as
well. Or still better do not take the risk?

[...]

 

[Jorge]

Yeah... "To WITH, or not to WITH"
Javascript WITH implementation is indeed a ticking bomb to handle with
extreme care. I myself once was a complete fool with it:http://groups.google.com/group/mozilla.dev.tech.svg/msg/e3ef5a71b7d95318

So I do agree with Matt Kruse athttp://www.javascripttoolbox.com/bestpractices/#with
as overall - but I do not agree to make WITH as some self-contained
evilness that acts by its own no matter what In case as above
is .style is available then all these properties should be here as
well. Or still better do not take the risk?

Yeah... "With statement considered harmful"
http://yuiblog.com/blog/2006/04/11/with-statement-considered-harmful/

 

[VK]

Yeah... "With statement considered harmful" http://yuiblog.com/blog/2006/04/11/with-statement-considered-harmful/

OK, voted out. Bye-bye, WITH :-(

 

[VK]

/* It would be nice to have button labels on
* user's preferred language and not English
* only.
* navigator.userLanguage (IE) and
* navigator.language (some other UAs) values
* may have different meanings: OS language,
* or browser interface language, or the preferred
* language in the browser settings. Either way
* IMHO it still allows to make a good guess what
* language the current user would like to see.
* If the detected language is not implemented yet
* then English is used by default.
* For such basic lexicon as "Yes", "No", "Cancel" etc.
* we may disregard country-specific variations, so we
* are taking only two first letters from the language
* code - so say "en", "en_US", "en_GB" will be "en".
*
*? Objections?
*/

if ('userLanguage' in navigator) {
var lang = navigator.userLanguage.substring(0,2);
}
else if ('language' in navigator) {
var lang = navigator.language.substring(0,2);
}
else {
var lang = 'en';
}

TransModal.lang = (lang in TransModal.buttonLabelSet) ?
lang : 'en';

I tried to find a resource with standard button labels in localized
Windows versions but no success. Anyone has one?
It also could be easily checked with IE installed via VBScript. Anyone
has time to match English labels to localized ones using provided
VBScript?

I am interested in any language of course, especially in French,
German and Spanish.

--------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en-US">
<head>
<meta http-equiv="Content-type"
content="text/html; charset=iso-8859-1">
<title>Label test</title>
<script type="text/vbscript">
</script>
</head>
<body>
<p>VBScript MsgBox labels' test</p>
<p>
<button type="button"
onclick='MsgBox "OK only", 0'

OK only</button>

<button type="button"
onclick='MsgBox "OK | Cancel", 1'

OK | Cancel</button>

<button type="button"
onclick='MsgBox "Abort | Retry | Ignore", 2'

Abort | Retry | Ignore</button>

<button type="button"
onclick='MsgBox "Yes | No | Cancel", 3'

Yes | No | Cancel</button>

</p>
</body>
</html>

 

[Thomas 'PointedEars' Lahn]

[...]

Just some hints after reading (w/o testing) it:

if ('userLanguage' in navigator) {
var lang = navigator.userLanguage.substring(0,2);
}
else if ('language' in navigator) {
var lang = navigator.language.substring(0,2);
}
else {
var lang = 'en';
}

Should be:

Says who?

var lang = 'en';
if ('userLanguage' in navigator) {

`navigator' is a reference to a host object. The `in' operation is not
backwards compatible, and untested property access should be avoided with
host objects. Better:

if (typeof navigator.userLanguage != "undefined")

lang = navigator.userLanguage.substring(0,2);
}
else if ('language' in navigator) {
lang = navigator.language.substring(0,2);
}

Same here.

Same here, although `TransModal' is probably a native object which limits
the error-proneness of this approach to that of the `in' operation.

See also http://PointedEars.de/es-matrix

I'd assume that "lang" is unknown here since there are only three
vars with that name each of which inside a different "if"-scope.

Utter nonsense.

ECMAScript implementations do not support automatic block scoping. `lang'
is a redeclared variable (because of two VariableDeclaration statements in
the source code, processed *before execution*). In any case, it would have
been initialized, because there is an `else' branch that executes its
BlockStatement without further conditionals.

Apparently you also don't know how the `in' operation works. It
type-converts the left-hand operand to string. If we would assume for
educational purposes that the variable would not have been initialized, it
would keep the initial value of `undefined'. The string representation of
`undefined' is "undefined". Since it would be unlikely that the object
referred to by `TransModal.buttonLabelSet' would have a property named
`undefined', the `TransModal.lang' property would then be assigned "en".

I strongly suggest you refrain from giving further advice or making further
assumptions from your position in the learning curve. You won't be making
even educated guesses at this time.

[...]
var wndDialog = document.createElement('DIV');

wndDialog.id = 'TransModalDialog';

/* Some complex styling of a completely empty element
* may make IE to act strange. To avoid that we are
* setting the default content to NO-BREAK SPACE
*/
wndDialog.innerHTML = '<span>\u00A0</span>';

Why use "innerHTML" (instead of "createElement()") here?

Good question. A reasonable answer to it is that the Document interface of
W3C DOM Level 2 Core may not implemented in one of the target environments.
Nevertheless, the proprietary `innerHTML' property should be avoided where
possible, and standards-compliant DOM mutator methods should be preferred
(but feature-tested at runtime before being used).

Furthermore, the character U+00A0 as-is constitutes a whitespace character
in HTML that is therefore rendered as if it was a space character (U+0020).
To have a non-breaking space rendered so, the HTML source code and so the
value assigned to the `innerHTML' property has to include one of `&nbsp;',
` ', or ` '.

Just a matter of style & opinion:

var s;
if ((s = wndDialog.style)) {
s.position = 'absolute';
s.zIndex = '1002';
s.left = '0px';
s.top = '0px';
s.cursor = 'default';
s.visibility = 'hidden';
}

IIRC, earlier Opera versions retrieved the `style' property as a string.
You would be augmenting a string object with properties, and not modify
the DOM representation of the element's `style' attribute, then.

[...]
var wndCover = document.createElement('DIV');

wndCover.id = 'TransModalVeil';

wndCover.innerHTML = '<span>\u00A0</span>';

see above.

with (wndCover.style) {
position = 'absolute';
zIndex = '1001';
left = '0px';
top = '0px';
margin = '0px 0px';
padding = '0px 0px';

left = "0";
top = "0";
margin = "0";
padding = "0";

Same as above.

With the added error-proneness of the `with' statement.


PointedEars