change alert message text color using javascript

You can use JQuery to resolve your Problem

<html>
<head>
<meta charset="utf-8" />
<title>JavaScript String fontcolor() Method</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-                  ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
 $( "#dialog-message" ).dialog({
  modal: true,
  buttons: {
  Ok: function() {
   $( this ).dialog( "close" );
   } 
}});
});
</script>
</head>

<body>
 <div id="dialog-message" title="My Dialog Alternative">
 <p style='color:red'> Hello world </p>
 </div>
</body>
 </html>

Hope this help :

<!doctype html>
<html>
<head>
<title>JavaScript String fontcolor() Method</title>
<style>
#alertoverlay{display: none;
    opacity: .8;
    position: fixed;
    top: 0px;
    left: 0px;
    background: #FFF;
    width: 100%;}

#alertbox{display: none;
    position: fixed;
    background: #000;
    border:7px dotted #12f200;
    border-radius:10px; 
    font-size:20px;}

#alertbox > div > #alertboxhead{background:#222; padding:10px;color:#FFF;}
#alertbox > div > #alertboxbody{ background:#111; padding:40px;color:red; } 
#alertbox > div > #alertboxfoot{ background: #111; padding:10px; text-align:right; }
</style><!-- remove padding for normal text alert -->

<script>
function CustomAlert(){
    this.on = function(alert){
        var winW = window.innerWidth;
        var winH = window.innerHeight;

        alertoverlay.style.display = "block";
        alertoverlay.style.height = window.innerHeight+"px";
        alertbox.style.left = (window.innerWidth/3.5)+"pt";
        alertbox.style.right = (window.innerWidth/3.5)+"pt"; // remove this if you don't want to have your alertbox to have a standard size but after you remove modify this line : alertbox.style.left=(window.inner.Width/4);
    alertbox.style.top = (window.innerHeight/10)+"pt";
        alertbox.style.display = "block";
        document.getElementById('alertboxhead').innerHTML = "JavaScript String fontcolor() Method :";
        document.getElementById('alertboxbody').innerHTML = alert;
        document.getElementById('alertboxfoot').innerHTML = '<button onclick="Alert.off()">OK</button>';
    }
    this.off = function(){
        document.getElementById('alertbox').style.display = "none";
        document.getElementById('alertoverlay').style.display = "none";
    }
}
var Alert = new CustomAlert();
</script>
</head>
<body bgcolor="black">
<div id="alertoverlay"></div>
<div id="alertbox">
  <div>
    <div id="alertboxhead"></div>
    <div id="alertboxbody"></div>
    <div id="alertboxfoot"></div>
  </div>
</div>
<script>Alert.on("Hello World!");</script>
</body>
</html>

The concept is taken from this : http://www.developphp.com/video/JavaScript/Custom-Alert-Box-Programming-Tutorial


No. alert() accepts a string and renders it using a native widget. There is no provision to style it.

The closest you could get would be to modify the HTML document via the DOM to display the message instead of using an alert().

Tags:

Javascript

Recent Posts