Question

我有一个Meteor项目并且正在使用Materialise UI。我想通过在它们周围添加一个独特的边框来改变模态的外观，所以我发现了Materialize类对于模态的内容并添加了一些CSS

.materialize-modal {
padding: 1em;
border: 1em solid transparent;
background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, red 0, red 12.5%, white 0, white 25%, #58a 0, #58a 37.5%, white 0, white 50%) 0 / 5em 5em;
}

但是，这当然会改变所有的模态。我的意图是只在其中一些上使用它。所以我想如果我在触发模态时添加了一个类（我不想要特殊边框的模态），我可以在触发时添加一个类：

$('.materialize-modal').addClass('plain');

现在使用CSS：

.materialize-modal:not(.plain) {
padding: 1em;
border: 1em solid transparent;
background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, red 0, red 12.5%, white 0, white 25%, #58a 0, #58a 37.5%, white 0, white 50%) 0 / 5em 5em;
}

这里没有运气。我猜想使用＆＃39; addClass＆＃39;并不是按照我想象的方式加入课程;它也许正在寻找平原＆＃39;类并尝试将CSS应用于它。＆＃39; plain＆＃39; class没有任何与之关联的CSS。只是在那里，以防止某些模态的边界，并认为＆＃39;：not＆＃39;选择器将看到添加的类。有什么办法吗？

Answer 1

最有可能的是，您已将Css类应用于错误的元素，或者jQuery无法找到该元素，这就是为什么它没有被添加到它中。

检查jQuery是否可以找到元素

console.log($('.materialize-modal').length); //If 0 then it can't find the element

如果长度为0，您可能需要调用setTimeout(function() {},0);内的代码如果长度为1并且仍然存在问题。

使用chrome Dev工具（f12）并检查模态以检查类实际上是在模态上。

如果类在模态上，则CSS就是问题，您可能需要将css更改为：

.materialize-modal:not(.plain) .modal-dialog {
    padding: 1em;
    border: 1em solid transparent;
    background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, red 0, red 12.5%, white 0, white 25%, #58a 0, #58a 37.5%, white 0, white 50%) 0 / 5em 5em;
  }

为什么不以我期望的方式添加课程呢？

1 个答案: