Question

我正在尝试为我的一些div写一个叠加层，以防止用户在没有执行上一个任务的情况下远行。我有覆盖工作和消息显示，但是当我尝试将问题集中在问题所在的时候。

我的jQuery看起来像这样

$("<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"));

然后我一放

   text-align: "center"

在那里它会中断并抛出错误信息

SyntaxError: Unexpected token '-'

为什么会发生这种情况？

Answer 1

您需要将代码更改为：

$("<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"));

对于样式，当使用JavaScript引用样式时，短划线总是替换为camelCase。

Answer 2

像这样添加：

$("<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"));

Answer 3

你可以做到

textAlign: "center"

但

"text-align": "center"

也会奏效。由你决定。

我只想保持一致。

Answer 4

尝试position: "fixed"并设置样式margins我会一直显示自己的消息。我认为你的对话框在屏幕上是静态的。

不要在JQuery上浪费代码，我最好为你的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;}

希望它有所帮助。

text-align破解jQuery

4 个答案: