CODEWITHSUNDEEP
jquerycss
david
david

Reputation: 161

How do I style the alert box with CSS?

-- 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)

  1. YOU CAN NOT OVERIDE DEFAULT STYLE OF ALERT. It is produced by your client (eg. chrome firefox etc)

  2. 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/

Upvotes: 7

Views: 49990

Answers (5)

Shan
Shan

Reputation: 475

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

$.alert('text');

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

Upvotes: 1

Jonathan Payne
Jonathan Payne

Reputation: 2223

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>

​

Upvotes: 8

Abhishek Mehta
Abhishek Mehta

Reputation: 1445

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

Upvotes: 1

Konrad Viltersten
Konrad Viltersten

Reputation: 39118

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.

Upvotes: 2

Alex Weinstein
Alex Weinstein

Reputation: 9891

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

Upvotes: 6

Related Questions