-3

I'm trying to writ an overlay for a few of my divs to prevent users from going to far without doing previous tasks. I have the overlay working and the message displaying, but when I try and center the message thats when the problem arrises.

my jQuery looks like this

$("<div>You have to complete your previous tasks before you can move on.</div>").css({
    position: "absolute",
    width: "100%",
    height: "100%",
    top: 0,
    left: 0,
    background: "rgba(0,0,0,0.3)"
}).appendTo($(".disabled-box").css("position", "relative"));

and as soon as I put 

   text-align: "center"

in there it breaks and throws the error message

SyntaxError: Unexpected token '-'

Any ideas why this is happening?

zazvorniki
  • 3,512
  • 21
  • 74
  • 122
  • use camel case: `textAlign: "center",` or wrap text-align key inside quotes – A. Wolff Dec 30 '13 at 14:21
  • It is not a duplicate because the text-align they were using there was not working here. – zazvorniki Dec 30 '13 at 14:31
  • It is a duplicate. There are a lot of answers with a lot of possible ways to do it. I'm sure they work. If you're looking for a different answer (whatever...), opening a bounty on the existing question is the way to go. – Marcel Gwerder Dec 30 '13 at 14:36

4 Answers4

1

You need to change your code to this:

$("<div>You have to complete your previous tasks before you can move on.</div>").css({
    position: "absolute",
    width: "100%",
    height: "100%",
    top: 0,
    left: 0,
    background: "rgba(0,0,0,0.3)",
    textAlign: 'center'
}).appendTo($(".disabled-box").css("position", "relative"));

For styles, the dash is always replaced with camelCase when referring to styles using JavaScript.

Joeytje50
  • 18,636
  • 15
  • 63
  • 95
0

Add it like this:

$("<div>You have to complete your previous tasks before you can move on.</div>").css({
    position: "absolute",
    width: "100%",
    height: "100%",
    top: 0,
    "text-align": "center",
    left: 0,
    background: "rgba(0,0,0,0.3)"
}).appendTo($(".disabled-box").css("position", "relative"));
EfrainReyes
  • 1,005
  • 2
  • 21
  • 55
0

You can do

textAlign: "center"

but

"text-align": "center"

would also work. It's up to you.

I just like to keep it consistent.

Bill Criswell
  • 32,161
  • 7
  • 75
  • 66
0

Try position: "fixed" and styling margins I do it all the time showing my own messages. I think your dialog will be static on your screen.

Don't waste code doing it on JQuery, I'ts better doing a class center for your div.

.center{margin:0 0;width:100%;height:100%;top:0px;left:0px;position:fixed;background-color:#FAFAFA;overflow:hidden;opacity:0.9;z-index:99;}

Hope it helps.

CaptainKnee
  • 139
  • 5