I have too many alert msgs according to my programming conditions, and i wants to beautify them coz thatz looking normal and weird.

if(True)
{
   echo "<script>alert('blah blah blah');</script>";
}

if(False)
{
   echo "<script>alert('blah blah blah');</script>";
}

I tried too many jquery plugins but they work with some specific event like onclcik, onblur, onhover, onload, onsubmit...

In above code how can i customize alert msgs without using any event

I have too many alert msgs according to my programming conditions, and i wants to beautify them coz thatz looking normal and weird.

if(True)
{
   echo "<script>alert('blah blah blah');</script>";
}

if(False)
{
   echo "<script>alert('blah blah blah');</script>";
}

I tried too many jquery plugins but they work with some specific event like onclcik, onblur, onhover, onload, onsubmit...

In above code how can i customize alert msgs without using any event

• javascript
• jquery
• uialertview
• alert

• What I did to make "beautiful" alert boxes easily was create a custom class with a constructor that accepts a string. Then I just instantiate the class with the string and it looks nice. – Mizuho Commented Jun 7, 2012 at 6:24

4 Answers 4

Use jQuery UI dialog.

It can be opened directly just like an alert. just write you message to some element like a div, and how it on ready.

See jQuery ui dialog

Sample code:

js:

<script>
    $(function() {
        $( "#dialog" ).dialog();
    });
    </script>

html:

<div id="dialog" title="My Alert">
    <p>Blah blah blah</p>
</div>

Avoid modal messages if possible. They can be quite irritating, cause your whole screen is locked. Same goes for alerts.

You can use jQuery UI for custom alerts (modal dialogs).

Try it here: http://jqueryui./demos/dialog/#modal-message

PS: There is no echo in JavaScript.

Nice modal dialog!

Codez:

$( "#dialog-message" ).dialog({
    modal: true,
    buttons: {
        Ok: function() {
            $( this ).dialog( "close" );
        }
    }
});

The box that popups when calling alert function, can not be customized through css. It's a browser ponent so takes the style from the browser and not from the page. So you have to use a popup dialog like jquery ui dialog

You can try this plugin to beautify alert: http://plugins.jquery./alert-beautifier/