Alert Box with CSS

Question

Is it possible to add Alert box with CSS attributes?

For my code is that

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

else {
    XXX
}

My code for my alert style

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

The Result that I want : https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_alert

But I always get this: https://gyazo.com/88f00fdf2654367aa148b033c8832698

`alert` is not an element it is a function, how can you add css to a function like that? — Mamun, Oct 20 '18 at 04:14
Notice the HTML code in the W3Schools example. There's a div.alert (`
`) element--not the alert window--that's being styled. Could you help clarify what you're trying to do? — stealththeninja, Oct 20 '18 at 04:15
@stealththeninja trying to implement a alert box when user click on register button. but the original alert box is too plain, wanted to add the style that from w3school — VoxVola, Oct 20 '18 at 04:21

score 2 · Answer 1 · answered Oct 20 '18 at 04:20

2

The problem is you're using the alert function:

alert("Please Fill Up Required Field");

You can't style this - it's a browser-generated box. You need to use a modal box, and then you can style it.

answered Oct 20 '18 at 04:20

Jack Bashford

43,180
11
50
79

score 1 · Answer 2 · answered Oct 20 '18 at 04:21

1

In the W3schools example, they are not adding the CSS attributes to the alert element, but to a class on a div:

<div class="alert">

I'd recommend going their route and just making a Div appear to be an alert by changing the CSS.

answered Oct 20 '18 at 04:21

Tater

105
1
8

score 0 · Answer 3 · answered Oct 20 '18 at 04:35

The alert box is a system object, and not subject to CSS. To do this style of thing you would need to create an HTML element and mimic the alert() functionality. The jQuery UI Modal box does a lot of the work for you, working basically as I have described: Link.

Alert Box with CSS

3 Answers3

Linked