How do I style the alert box with CSS?

Question

-- Update --i have read a lot on the subject tried a few scripts and needed help to find out what you can or cant do. Community answered it all and the following is a good starting point. (answers here extracted from community below, thank you)

YOU CAN NOT OVERIDE DEFAULT STYLE OF ALERT. It is produced by your client (eg. chrome firefox etc)
you can use jquery instead. Instead of using a script like:

function check_domain_input() { var domain_val = document.getElementsByName('domain'); if (domain_val[0].value.length > 0) { return true; } alert('Please enter a domain name to search for.'); return false; }

which makes the client (firefox chrome etc) produce an alert box.

2b. You tell the code if somethings needs to happen on a event load jquery alertbox which you can make pretty: (Answered by Jonathan Payne and created by Jonathan Payne. Thank you)

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.css" type="text/css" media="all" />

<div onclick="check_domain_input()">Click</div>

<div id="dialog" title="Attention!" style="display:none">
    Please enter a domain name to search for.
</div>

<script>
    function check_domain_input()
    {        
        $( "#dialog" ).dialog(); // Shows the new alert box.

        var domain_val = document.getElementsByName('domain');

        if (domain_val[0].value.length > 0)
        {
            return true;
        }

        $( "#dialog" ).dialog();

        return false;
    }
</script>

Check out the jsFiddle here: http://jsfiddle.net/8cypx/12/

I answered your first and second question. You can see my answer below. — Jonathan Payne, Jul 17 '12 at 20:53
I know, just giving back to community by writting something up that is clear as i have done a search on this here, there is plenty but if you give your time to conclude your findings rather then running off with your answers i thought maybe somebody else might read it and not have to create a new topic... — david, Jul 17 '12 at 22:41
@DavidWalter Don't do that. You've destroyed the content of your question by editing out the meaningful stuff. What's left here isn't appropriate for the site, and it *will* be closed and deleted unless you fix it. — user229044, Jul 18 '12 at 03:55

Jonathan Payne · Accepted Answer · 2012-07-17T20:52:52.723

Try jQuery UI located here: http://jqueryui.com/demos/dialog/

They have a theme roller where you can style the dialog and modal boxes.

-- EDIT --

Answering your second question.

Check out the jsFiddle here: http://jsfiddle.net/8cypx/12/

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.css" type="text/css" media="all" />

<div onclick="check_domain_input()">Click</div>

<div id="dialog" title="Attention!" style="display:none">
    Please enter a domain name to search for.
</div>

<script>
    function check_domain_input()
    {        
        $( "#dialog" ).dialog(); // Shows the new alert box.

        var domain_val = document.getElementsByName('domain');

        if (domain_val[0].value.length > 0)
        {
            return true;
        }

        $( "#dialog" ).dialog();

        return false;
    }
</script>

thank you, can mentally relate to that and i think after weeks of playing with jquery youve put it in prospective now thank you sir and to everyone else — david, Jul 17 '12 at 21:36

score 6 · Answer 2 · answered Jul 17 '12 at 18:46

6

Instead of built-in Javascript dialog box popups - that are ugly and impossible to customize with CSS - I would recommend using jQuery dialog box controls. Those can be styled easily, and jQuery ships with many built-in themes for it, too.

http://docs.jquery.com/UI/Dialog

answered Jul 17 '12 at 18:46

Alex Weinstein

9,823
9
42
59

was hoping you wouldnt just post that link! read all those links but cant get it to work on my site. my questions is how to overide default styling of the alert box. – david Jul 17 '12 at 18:53
3

Overriding the style of the default alert box is impossible. Sorry. – Alex Weinstein Jul 17 '12 at 18:54
thank you would explain why i cant find anything on it! so how do i change the above script to call a div? – david Jul 17 '12 at 18:59
1

You use `myAlert` (in the same way as alert) to display a jQuery UI dialog by adding the line `myAlert = function(body, title) { $("
" + body + "
").dialog(); };` (You could also override `alert`, but that's generally considered to be a bad thing to do.) Or do it as shown on the help page: make a div in your HTML, add message content to div, call `$("#your-div").dialog();`. – meloncholy Jul 17 '12 at 19:09
what is myalert can you explain more? – david Jul 18 '12 at 04:42

score 2 · Answer 3 · answered Jul 17 '12 at 18:47

2

If i got you question correctly, i don't think you can do that, since the pop-ups are wired into the system of the client. However, designing what you described isn't that hard, viewing a DIV element or something.

answered Jul 17 '12 at 18:47

Konrad Viltersten

36,151
76
250
438

how do i change that to look up a div insted? – david Jul 17 '12 at 18:58

score 1 · Answer 4 · answered Jul 17 '12 at 18:48

1

The confirm/alert box is part of the browser not your page.

answered Jul 17 '12 at 18:48

Abhishek Mehta

1,447
1
14
16

score 1 · Answer 5 · answered Nov 03 '14 at 11:47

1

Use the below plugin http://plugins.jquery.com/msgbox/
and use the code

$.alert('text');

instead of alert('text'); Customize with css

answered Nov 03 '14 at 11:47

Shan

463
3
17

How do I style the alert box with CSS?

5 Answers5

Linked