Javascript Messagebox colour

Question

0.00/5 (No votes)

See more:

Hi,
In my asp.net code I used javascript for displaying a messagebox

JavaScript

<script type="text/JavaScript" >
  
      alert('Today you have consumed 20% of Average');
     
    </script>

That Messagebox is white in colour.I want to give colour to the messagebox.Is there any way to do that?

Posted 21-Nov-12 19:01pm

danil33

Updated 21-Nov-12 19:03pm

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

v2

Add a Solution

3 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

deepak.m.shrma · Answer 1 · 2012-11-21T19:50:00

There are lots of customizable pop-up or dialog box is available. jQuery support wide range of these kind of ui plug-in you can find it on google. mean while i will suggest some of the. using these plug-in you can easily upgrade ur page contain of looks.

Apprise-The-attractive-alert-alternative-for-jQuery

confirm_boxes_with_jquery, in this site you will find multiple way to create your own alert box. Just check it .. its a Wow!! :-)

Ram424 · Answer 2 · 2012-11-21T19:58:00

Solution 3

You can't, the alert dialog uses the system's (or more accurately, the browser's) theme. If you want to change the way alerts look you will have to create your own modal dialogs.

Posted 21-Nov-12 19:58pm

Ram424

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) · Answer 3 · 2012-11-21T19:29:00

Yes you can do it by over-riding the default window.alert method of a browser.
Check Custom Alert Demonstration[^] for learning it in details.

The css used to color and change format is as below...

CSS

#modalContainer {
    background-color: transparent;
    background-image: url("tp.png");
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 10000;
}
#alertBox {
    background-color: #F2F5F6;
    background-image: url("alert.png");
    background-position: 20px 30px;
    background-repeat: no-repeat;
    border: 2px solid #000000;
    margin-top: 50px;
    min-height: 100px;
    position: relative;
    width: 300px;
}
#modalContainer > #alertBox {
    position: fixed;
}
#alertBox h1 {
    background-color: #78919B;
    border-bottom: 1px solid #000000;
    color: #FFFFFF;
    font: bold 0.9em verdana,arial;
    margin: 0;
    padding: 2px 0 2px 5px;
}
#alertBox p {
    font: 0.7em verdana,arial;
    height: 50px;
    margin-left: 55px;
    padding-left: 5px;
}
#alertBox #closeBtn {
    background-color: #78919B;
    border: 2px solid #000000;
    color: #FFFFFF;
    display: block;
    font: 0.7em verdana,arial;
    margin: 5px auto;
    padding: 3px;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 70px;
}
#mContainer {
    border-bottom: 2px solid #000000;
    border-top: 2px solid #000000;
    font: 0.7em verdana,arial;
    margin: auto;
    padding: 5px;
    position: relative;
    width: 600px;
}
h1, h2 {
    border-bottom: 1px solid #000000;
    font: bold 1.5em verdana;
    margin: 0;
    padding: 4px;
}
code {
    color: #006699;
    font-size: 1.2em;
}
#credits {
    border-bottom: 1px solid #000000;
    border-top: 1px solid #000000;
    font: 0.7em verdana;
    height: 90px;
    margin: 25px auto 0;
    padding-top: 4px;
    position: relative;
    width: 350px;
}
#credits img {
    border: 1px solid #000000;
    float: left;
    height: 79px;
    margin: 5px 10px 5px 0;
    width: 80px;
}
.important {
    background-color: #F5FCC8;
    padding: 2px;
}
code span {
    color: green;
}

And the code for over-riding the default window.alert method of a browser is demonstrated there.

Thanks...

Javascript Messagebox colour

3 solutions

Solution 2

Solution 3

Solution 1

Add your solution here

Preview 0