× ←これを押すと閉じます。
× ←これを押すと閉じます。

Source (01.js)

cnt=0;

function applicSpr(event,sorr,fldID) { // 1つのコンテナの処理中に他のコンテナの処理が行われるのを防ぐ。
	a = event;
	b = sorr;
	c = fldID;
	if (cnt==0) spreadFld(a,b,c);
}

function spreadFld(event,sorr,fldID) { // 本体
	os = document.getElementById(fldID).style;
	hh = parseInt(os.height);
	hw = parseInt(os.width);
	fldId = fldID;
	if (cnt==0) {
		if (sorr) { // 広げる場合の変数定義
			os.left = document.body.scrollLeft + event.clientX + 100;
			os.top = document.body.scrollTop + event.clientY + 20;
			a1 = hh/2;
			a2 = hw/2;
			a3 = hh/2;
			a4 = hw/2;		
		}
		else { // 閉じる場合の変数定義
			a1 = 0;
			a2 = hw;
			a3 = hh;
			a4 = 0;
		}
	}
	if (sorr) { // 広げる場合の処理
		if (a1>0) {
			a1 -= hh/20;
			a2 += hw/20;
			a3 += hh/20;
			a4 -= hw/20;
			os.clip = "rect("+a1+" "+a2+" "+a3+" "+a4+")";
			cnt++;
      			setTimeout('spreadFld("",true,fldId)',5);
		}
		else cnt=0;
	}
	else { // 閉じる場合の処理
		if (a1<(hh/2)) {
			a1 += hh/20;
			a2 -= hw/20;
			a3 -= hh/20;
			a4 += hw/20;
			os.clip = "rect("+a1+" "+a2+" "+a3+" "+a4+")";
			cnt++;
      			setTimeout('spreadFld("",false,fldId)',5);
		}
		else cnt=0;
	}
}

Source (HTML)
 
<html>
<head>
<script language=JavaScript src=01.js></script>
</head>
<body>
<input type=button onclick=applicSpr(event,true,"popup1") value="真ん中から窓が開きます。">
<input type=button onclick=applicSpr(event,true,"popup2") value="真ん中から窓が開きます。">
<div id=popup1 style="position:absolute;background-color:navy;padding:6px;width:500;height:300;clip:rect(0 0 0 0);">
<span style="font-size:445%;border:3px solid #FFA;color:#FFA;" onclick=applicSpr(event,false,"popup1")>×</span>
<span style="color:#FFA;">←これを押すと閉じます。</span>
</div>
<div id=popup2 style="position:absolute;background-color:#300;padding:6px;width:500;height:300;clip:rect(0 0 0 0);">
<span style="font-size:445%;border:3px solid #FCC;color:#FCC;" onclick=applicSpr(event,false,"popup2")>×</span>
<span style="color:#FCC;">←これを押すと閉じます。</span>
</div>
</body>
</html>

Hints: