自定义模态对话框,该怎么解决

自定义模态对话框
大家好，
       现自定义了一个模态对话框，是用div实现的也可以任意在屏幕范围内拖动它，现在问题是这样的：要实现当div对话框层显示出来后除了该div层本身范围内可以任意操作或拖动外，其它范围不能操作且背景色是浅灰色(代表暂不可用的意思)。 怎样做到这点?


注：前提是不使用jQuery本身提供的内置dialog函数。


谢谢。
------解决方案--------------------
是呀，你在网上能找到的不都是这样的吗？
比如

<style> 

.black_overlay{ display: none; position: absolute; top: 0%; 

left: 0%; width: 100%;height: 100%; background-color: black; 

z-index:1001; -moz-opacity: 0.3; opacity:.30; filter: alpha(opacity=30); 

} 

.white_content { display: none; position: absolute; top: 25%; 

left: 25%; width: 50%;height: 50%; padding: 16px; 

border: 16px solid orange; background-color: white; z-index:1002; 

overflow: auto; 

} 

</style>

<p>click <a href = "javascript:void(0)" 

onclick = "document.getElementById('light').style.display='block';

document.getElementById('fade').style.display='block'">here</a></p> 

<div id="light" class="white_content">模式窗口内容

<a href = "javascript:void(0)" 

onclick = "document.getElementById('light').style.display='none';

document.getElementById('fade').style.display='none'">Close</a>

</div> 

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

</div>