change alert message text color using javascript

后端未结

关注

 4  508

Am using the below script to change the color of the script but showing \'font color=\"red\">Hello world /font> like this.Is any possible way to change the alert text color.

相关标签:

4条回答

青春惊慌失措

2021-01-17 17:59

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

0 讨论(0)
发布评论:

提交评论
- 加载中...

悲哀的现实

2021-01-17 18:00

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

0 讨论(0)

隐瞒了意图╮

2021-01-17 18:09

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>

0 讨论(0)

Happy的楠姐

2021-01-17 18:10

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

0 讨论(0)
发布评论:

提交评论
- 加载中...