JavaScript Alerts: color control: text color & background color control

I am working with JavaScript programming... (as opposed to "Java", a Sun Microsystems product).
I've found that JavaScript ALERTS, are possibly the only means for doing what I want to do.
I want to create an ALERT with white color text that will be unviewable against a white background.
I've already tried "#0XFFFFFF" (in HTML) and Font Color="WHITE"--but neither works!  It appears un-doable.

Obviously, I'm not a JavaScript expert. Perhaps I'm trying to do something that's axiomatically impossible to do? I'm using AutoIT v.3 to see HTML behind web pages I'm working on, but it's not helping me find the solution.  When I use plainvanilla JavaScript messages, vs, plainvanilla JavaScript Alerts, I can totally control and see what's happening in HTML-- or not-- depending which I'm working on.  But I am trying to build a smooth transition where an alert is invisibly colored.

Or Plan B...Perhaps maybe there is a form of JavaScript Alert (or other) Message Type-- that's "Alert like", in its features & functions? If so, is it usable/configurable to do what I want--obtain the interactive immediacy characteristic to a standard "plainvanilla" JavaScript ALERT?
I can go into further detail if it is needed for fully understanding what I am trying to do.
mauimaumauAsked:
Who is Participating?
 
under_dogCommented:
There is no way to change the appearance of the javascript alert() popup since this is controlled by the user's browser and not by the html code itself.

You could use a popup DIV for instance ... which would be customisable, but I'm not sure if it would meet your requirements since it's not really "alert like". What "alert like" behaviour are you looking for?
0
 
Devario JohnsonSoftware EngineerCommented:
If you want to do an actual JavaScript Alert, this, to my knowlege, is not possible.

But if you want to utilize JavaScript to make that kind of effect, similar to what under_dog said.

u can use a <Div> and then set it to a Z-index higher than that of your page.  Then make it look like an alert would...basically, utilizing any photoshop skill you may have.  you can then after a onmouseclick event, set the div's visibility to none.

That would make it look how you want and acheive the desired effect.
0
 
jhshenCommented:
you may try the code below:
It works for both IE 7 and Firefox, but behavior is different from default Alert function.

<html>
      <head>
      </head>
      <body>
                  <input type="button" value="Click Me" onclick="sAlert('This is the alert');" />
            
             <script type="text/javascript" language="javascript">

                  function sAlert(str){
                  var msgw,msgh,bordercolor;
                  msgw=400;
                  msgh=100;
                  titleheight=25 //
                  bordercolor="#336699";
                  titlecolor="#99CCFF";
                  
                  var sWidth,sHeight;
                  sWidth=document.body.offsetWidth;
                  sHeight=screen.height;

                  var bgObj=document.createElement("div");
                  bgObj.setAttribute('id','bgDiv');
                  bgObj.style.position="absolute";
                  bgObj.style.top="0";
                  bgObj.style.background="#777";
                  bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
                  bgObj.style.opacity="0.6";
                  bgObj.style.left="0";
                  bgObj.style.width=sWidth + "px";
                  bgObj.style.height=sHeight + "px";
                  bgObj.style.zIndex = "10000";
                  document.body.appendChild(bgObj);
                  
                  var msgObj=document.createElement("div")
                  msgObj.setAttribute("id","msgDiv");
                  msgObj.setAttribute("align","center");
                  msgObj.style.background="white";
                  msgObj.style.border="1px solid " + bordercolor;
                msgObj.style.position = "absolute";
            msgObj.style.left = "50%";
            msgObj.style.top = "50%";
            msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
            msgObj.style.marginLeft = "-225px" ;
            msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px";
            msgObj.style.width = msgw + "px";
            msgObj.style.height =msgh + "px";
            msgObj.style.textAlign = "center";
            msgObj.style.lineHeight ="25px";
            msgObj.style.zIndex = "10001";
   
               var title=document.createElement("h4");
               title.setAttribute("id","msgTitle");
               title.setAttribute("align","right");
               title.style.margin="0";
               title.style.padding="3px";
               title.style.background=bordercolor;
               title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
               title.style.opacity="0.75";
               title.style.border="1px solid " + bordercolor;
               title.style.height="18px";
               title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";
               title.style.color="white";
               title.style.cursor="pointer";
               title.innerHTML="Close";
               title.onclick=function(){
                    document.body.removeChild(bgObj);
                document.getElementById("msgDiv").removeChild(title);
                document.body.removeChild(msgObj);
                }
               document.body.appendChild(msgObj);
               document.getElementById("msgDiv").appendChild(title);
               var txt=document.createElement("p");
               txt.style.margin="1em 0"
               txt.setAttribute("id","msgTxt");
               txt.innerHTML=str;
           document.getElementById("msgDiv").appendChild(txt);
            }
            </script>
      </body>
</html>
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.