Add Mootools 1.3 element to document body

I have tried using the inject, adopt and grab methods to insert my new element into the document body, however it does not seem to be working.

What I really want it to do is to create a new div that displays over the top of all the other elements in the body. I have it working in a previous iteration of mootools however am unable to get it working in 1.3.

Just thought I would see if anybody had some ideas on here that could help, Cheers!

  var overlay = new Element('div', {
    'class': 'overlay',
    styles: {
      display: 'block',
      visibility: 'visible',
      position: 'fixed',
      background-color: '#4E5056',
      z-index: 65555,
      height: '100%',
      width: '100%',
      top: 0,
      left: 0
    }
  });

  $(docum开发者_StackOverflow中文版ent.body).inject(overlay);

you can benefit from using jshint/jslint.

you cannot leave background-color and z-index like that, use " " around them or use the scripting versions of backgroundColor and zIndex.

output of jslint:

Error:

Problem at line 7 character 17: Expected ':' and instead saw '-'.

background-color: '#4E5056',

Problem at line 7 character 23: Expected '}' to match '{' from line 3 and instead saw ':'.

background-color: '#4E5056',

Problem at line 7 character 25: Expected '}' to match '{' from line 1 and instead saw '#4E5056'.

background-color: '#4E5056',

Problem at line 8 character 14: Expected ')' and instead saw ':'.

z-index: 65555,

Problem at line 8 character 15: Missing semicolon.

z-index: 65555,

Problem at line 8 character 16: Expected an assignment or function call and instead saw an expression.

z-index: 65555,

Problem at line 8 character 21: Missing semicolon.

z-index: 65555,

Problem at line 8 character 21: Expected an identifier and instead saw ','.

z-index: 65555,

Problem at line 8 character 21: Stopping, unable to continue. (53% scanned).

do you not have a debugger? web inspector in chrome/webkit or firebug in firefox clearly show the exception:

missing : after property id
[Break On This Error] background-color: '#4E5056', 

and finally, injecting:

element.inject(document.body);
// or
$(document.body).adopt(element);

look at jsfiddle too: http://jsfiddle.net/dimitar/SW3pK/

you can click the jslint button there to verify the code too.

You have to use:

overlay.inject(document.body);

http://mootools.net/docs/core/Element/Element#Element:inject

You also should write properties always in ' or " like Dimitar said.

Example:

{
    'display': 'block',
    'background-color': '#F00'
}