Javascript Alert Box IN PHP . Remove the Gray/White Background when Alert POPS up

Question

Now what I got here is the script to alert "You have logged in successfully" after correct login information upon filling up the form at index.php...

In my check_login.php these are the scripts... So far

if($count['user_type']== "agent"){

session_register("myusername");
session_register("mypassword");

echo '<script type="text/javascript">window.onload = function() {
alert("You have logged in successfully!\n");}</script>';
echo "<meta http-equiv=\"refresh\" content=\"0;URL=pages/agent.php\">";
exit();
//header("location:pages/agent.php");
}
if ($count['user_type']== "moderator"){

session_register("myusername");
session_register("mypassword");
header("location:pages/moderator.php"); 
}
else {
echo "<script type='text/javascript'>alert('Invalid Login! Please Try Again!');</script>";
echo "<meta http-equiv=\"refresh\" content=\"0;URL=index.php\">";
}

The alert box is totally working but.. I want it to pop up while the background is still visible (index.php) and after clicking OK... it will redirect into a page which is from my code --> to "agent.php"

I used

echo "<meta http-equiv=\"refresh\" content=\"0;URL=pages/agent.php\">";

to redirect a successful logged in user..

But before the redirection process... I want the user to see an alert box.

My point is, how can I make the alert box pop up itself while the background is still visible. I noticed that in Firefox it is in Gray bg while in Chrome and so on... the bg is white...

Please Help. Thanks in Advance :|

Answer 1

I don't think there's a way to change the look and feel of default alert boxes, but who says you can't make your own.

Feel free to modify this as needed. It's basically a custom alert function that takes two parameters, the message, and a callback function to execute when the alert is dismissed with the "OK" button.

function customAlert(m,func){
  var d=document, 
      c=d.createElement('div'),
      e=d.createElement('div'), 
      f=d.createElement('div'),
      a=d.createElement('button');
      c.style.cssText = 'background:#fff;width:200px;height:100px;border:1px solid #bbb;border-radius:6px;position:absolute;z-index:999;top:25%;left:25%;font:13px arial;box-shadow:0 0 10px #ccc;';
      e.style.cssText = 'background:#ccc;padding:5px;border-bottom:1px solid #aaa;';
      f.style.cssText = 'text-align:center;padding:10px;';
      a.style.cssText = 'display:block;margin:0 auto;padding:2px 8px;';
      a.innerText = 'Ok';
      a.onclick = function(){
        d.body.removeChild(c);
        func();
      }
      e.innerHTML = '<b>Alert</b>';
      f.innerHTML = m;
      c.appendChild(e);
      c.appendChild(f);
      c.appendChild(a);
      d.body.appendChild(c);
      return false;
}

customAlert('some message',function(){
  /*code to do when they click OK*/
 location.href='pages/agent.php';
});​

See the example here: http://jsfiddle.net/E6h8C/

Hope that helps.

Answer 2

Alert popups normally delays page loading. There isn't any solution using the original alert() function.