CSS警报框

Question

是否可以添加具有CSS属性的警报框？

因为我的代码是

if (username==null) {
    alert("Please Fill Up Required Field");
}

else {
    XXX
}

我的警报风格代码

<style>
.alert {
    padding: 20px;
    background-color: #f44336;
    color: white;
}
</style>

我想要的结果：https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_alert

但是我总是这样：https://gyazo.com/88f00fdf2654367aa148b033c8832698

Answer 1

问题是您正在使用alert函数：

alert("Please Fill Up Required Field");

您无法设置样式-这是浏览器生成的框。您需要使用modal box，然后才能设置其样式。

Answer 2

在W3schools示例中，他们不是将CSS属性添加到alert元素，而是添加到div上的类：

<div class="alert">

我建议走他们的路线，并通过更改CSS来使Div似乎是一个警报。

Answer 3

警报框是系统对象，不受CSS约束。为此，您需要创建一个HTML元素并模仿alert（）功能。 jQuery UI Modal框为您做了很多工作，基本上就像我所描述的那样工作：Link。