メニューを押すとウィンドウが開いたり

人力検索はてな JavaScript

Javascriptで開いたウィンドウを閉じたい Javascriptで、メニュ… - 人力検索はてなに対する回答を行いました。

質問：Javascriptで開いたウィンドウを閉じたい

Javascriptで、メニューを押すとウィンドウが開いたり、閉じたりするものを書きました。
http://1st.geocities.yahoo.co.jp/gl/barreko00/view/20110611

これを、灰色のフォームウィンドウが開いた状態のときに、灰色以外の部分をクリックしたときに
ウィンドウを非表示に切り替えるにはどうしたらよいでしょうか
(ただし、灰色のウィンドウの中をクリックしたときには、ウィンドウは閉じない)

回答

フォーカスと消去フラグ、
setTimeoutとclearTimeoutによる時間差イベントの発生とキャンセル
をすべて連動させると実現できます。

動作確認ブラウザ：IE8, Firefox3.5, Chrome
【動作サンプルおよびソースコード】
http://hp.vector.co.jp/authors/VA034687/sample/js_dhtml.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script type="text/javascript" language="javascript">
<!--
contents=false;
tid=null;
flg_hide=true;

function show() {
	var elm=document.getElementById('contents');
	if (contents) {
		elm.style.display='none';
	} else {
		elm.style.display='block';
		focusInput();
	}
	contents=!contents;
}
function focusInput(){
	document.getElementById('text_input').focus();
	if(tid != null){
		clearTimeout(tid);
	}
}
function myHide(){
	
	if( flg_hide ){
		document.getElementById('contents').style.display='none';
		contents=false;
	}
}
function hide_on(){
	flg_hide=true;
}
function hide_off(){
	flg_hide=false;
}
-->
</script>

</head>
<body>

	<span id="menu" onclick="show();" style="cursor:pointer"  />メニュー</span>
	<div id="contents" onclick="hide_off();focusInput();" onmouseout="hide_on()" style="background:#CCCCCC;display:none;padding:10px;width:180px" >
		<form>
		<input type="text" id="text_input" name="text" onfocus="hide_off()" onblur="tid=setTimeout(function(){myHide()}, 200)" style="width:160px" />
		<br />
		<input type="submit" onfocus="hide_off()" name="submit" value="OK" />
		</form>
	</div>
</body>
</html>