How do I style the alert box with CSS?

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>


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


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.

Tags:

Css

Jquery