Popup Box Solutions - Alert, Confirm, Prompt, etc.

If you're facing a Javascript pop up (or so spelled as popup and pop-up) box problems like this:

1. my pop up box appeared in different colors and borders an so on - depends on visitors' PC;
   
2. I don't like the annoying sound when a box pops out my visitors' Internet Explorer (IE);
   
3. I don't like the title bar showing [Javascript Application] in my visitors' Mozilla Firefox;
   
4. it doesn't suits when my pop up confirmation question answered using 'Ok' or 'Cancel';
   
5. I want to prompt a password before submitting a form but the password characters can be seen,
   

you've come to the right place because here we're going to discuss about:

1. how to create a nice, simple and light pop up box;
   
2. how to overcome or stop the annoying sound when a box pops out your IE ;
   
3. how to set a nicer title on your boxes when using Firefox - instead of [Javascript Application];
   
4. how to set a Yes-No or Yes-No-Cancel instead of Ok-Cancel confirm box;
   
5. how to set password input type in classic javascript prompt box;
   
6. how to pop a box out in almost any desired looks and feels that you've ever imagined of?!
   

What you're really need to understand in the first place is - The Concept - because this will make you understand WHAT actually happened and HOW is it happened when you're trying to perform a pop up boxes. By understanding the concept, you'll never forget how to make them in the future. (Don't be like me - always forgot again and again)

Pop ups basically work like this. Pop up box that you wanted to display is actually has been preloaded when loading process happen. It's just that it is being hidden by javascript. When somebody hits an appropriate button, the pop up box will visible.

So when you're building a pop up box, you'll basically have to put up a pop up script like this:

<script>
function myPopUp() {
  alert("This is an alert pop up box");
}
</script>

or this:

<script>
function myPopUp() {
  if ( confirm("This is a confirm pop up box") ) return true;
  else return false;
}
</script>

or this:

<script>
function myPopUp() {
  if ( prompt("This is a prompt pop up box") == "value" ) return true;
  else return false;
}
</script>

whereas the activation button will be like this:

<input value="Hit me" onclick="return myPopUp();" type="button">

When you're facing any of above problems and wanted to be like any solutions stated above, you're recommended to change them to a css pop up box, like this:

First, set the style like this:

<style>
.black_overlay{
  display: none;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 724px;
  height: 568px;
  background-color: black;
  z-index:1001;
  -moz-opacity: 0.8;
  opacity:.60;
  filter: alpha(opacity=60);
}

.white_content {
  display: none;
  position: absolute;
  top: 200px;
  left: 150px;
  width: 400px;
  height: 100px;
  padding: 16px;
  border: 16px solid #900;
  background-color: white;
  z-index:1002;
  overflow: auto;
}
</style>

Then, set the box like this:

<div id="light" class="white_content">

Here, put any type of your desired pop up box message freely using any HTMLs like form, input, textarea, select, etc.

Don't forget to put your close button like this:

<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none'; document.getElementById('fade').style.display='none'">Close[x]</a>

Remember the closing div too:

</div>

And also a background to disable the page while the pop up box is on:

<div id="fade" class="black_overlay"></div>

And last but not least, the activation button - will be like this:

<input value="Hit me" onclick="document.getElementById('light').style.display='block'; document.getElementById('fade').style.display='block'" type="button">

That's it, and you're done!

P/s: This box has been successfully tested on IE5, IE6, IE7, Firefox 2.0, Netscape.