Multiple Javascript Popup help - the single one works fine

Hi guys,

I would love to have a little help on a javascript problem that I am having as I am not very advanced at this subject.

I need to have 3 javascript popups (in stead of one) for a WordPress project that I am working on.

Please find below the working code of a single popup. Also you can see this live at my testing server: www.wplancer.com/clients. Just click on the login to view that.

<style type="text/css">
<!-- 
 .dragme { cursor: move }

.babi td{
			 height: 30px;
			 text-align: center;
			 font: bold 13px Arial;
			 color: white;
			 }
.babi td#right{
			 text-align: right;
			 }
.babi td a{
			 color: white;
			 text-decoration: none;
			 }
.mami{
			 background-color: #e5e5e5;
			 }
.bebi{
			 padding: 10px;
			 text-align: left;
			 }

#username{
				width: 140px;
				height: 30px;
				line-height: 30px;
				border: 1px solid #999;
				margin-right: 5px;
				}
				
#password{
			 width: 140px;
				height: 30px;
				line-height: 30px;
				border: 1px solid #999;
				margin-right: 5px;

			 }
#login{
			 width: 50px;
			 height: 30px;
			 line-height: 30px;
			 border: 0;
			 background: #999;
			 color: white;
			 }
-->
</style>



<script type='text/javascript'>
var ie = document.all;
var nn6 = document.getElementById &&! document.all;

var isdrag = false;
var x, y;
var dobj;

function movemouse( e ) {
  if( isdrag ) {
    dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
    dobj.style.top  = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
    return false;
  }
}

function selectmouse( e ) {
  var fobj       = nn6 ? e.target : event.srcElement;
  var topelement = nn6 ? "HTML" : "BODY";

  while (fobj.tagName != topelement && fobj.className != "dragme") {
    fobj = nn6 ? fobj.parentNode : fobj.parentElement;
  }

  if (fobj.className=="dragme") {
    isdrag = true;
    dobj = document.getElementById("styled_popup");
    tx = parseInt(dobj.style.left+0);
    ty = parseInt(dobj.style.top+0);
    x = nn6 ? e.clientX : event.clientX;
    y = nn6 ? e.clientY : event.clientY;
    document.onmousemove=movemouse;
    return false;
  }
}

function styledPopupClose() {
  document.getElementById("styled_popup").style.display = "none";
}

document.onmousedown=selectmouse;
document.onmouseup=new Function("isdrag=false");
</script>


<div id='styled_popup' name='styled_popup' style='width: 380px; display:none; position: absolute; top: 98px; left: 50%; background-color: #ca0003; padding: 4px;'>
<table width='380' cellpadding='0' cellspacing='0' border='0'>
<tr class="babi">
<td width="16%">LOGIN</td>
<td width="68%" class='dragme' id="right">MOVE</td>
<td width="16%"><a href='javascript:styledPopupClose();'>CLOSE</a></td>
</tr>
<tr class="mami">

<td colspan='3'>
<div class="bebi">
<form name="loginform" id="loginform" action="http://www.wplancer.com/clients/wp-login.php" method="post">
<label><input type="text" name="log" id="log" value="" size="20" tabindex="7" /></label>
<label><input type="password" name="pwd" id="pwd" value="" size="20" tabindex="8" /></label>
<input type="submit" id="submit_id" name="submit" value="Login &raquo;" tabindex="9" />
<br />
<a href="http://http://www.wplancer.com/clients//wp-login.php?action=register">Register</a>    
</form>

</div>
</td>
</tr>
</table>
</div>

<a href="#" onClick='document.getElementById("styled_popup").style.display="block"'>Login</a>

Code (markup):

Once more, I would just like to have 3 working popups, in stead of one. How can I do that. Thanks very much for your valuable help.

Kindly,

Banago

 

code below is for 2 two popup, codes in red are modified or addedd; you can edit for your need.

You can find other popup effects from this. Or http://javascriptbank.com - place you can find all JavaScripts you need

 

Thanks very very much. I really appreciate that. I will right now have a look at it and let you know about the result.