设计遮罩层

HTML

<input type="button" value="打开对话框" onclick="openDialog();"/>
<div id="dlgTest" class="dialog"><span class="close">×</span>
    <div class="title">对话框标题栏</div>
    <div class="content">对话框内容框</div>
</div>
    					

JS

function Dialog(id){
    this.id=id;
    var that=this;
    document.getElementById(id).children[0].onclick=function(){
		that.close();
    }
}
Dialog.prototype.show=function(){
    var dlg=document.getElementById(this.id);
    dlg.style.display='block';
    dlg=null;
}
Dialog.prototype.close=function(){
    var dlg=document.getElementById(this.id);
    dlg.style.display='none';
	dlg=null;
}
function openDialog(){
	document.getElementById('pageCover').style.display='block';
    var dlg=new Dialog('dlgTest');
    dlg.show();
}
    					

CSS

.dialog {
    width: 300px;
    height: 200px;
    margin: auto;
    box-shadow: 2px 2px 4px #ccc;
    background-color: #f1f1f1;
    border: solid 1px #aaa;
    border-radius: 4px;
    overflow: hidden;
    display: none;
}
.dialog .title {
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    padding: 6px;
    background-color: #404040;
}
.dialog .close {
    width: 20px;
    height: 20px;
    margin: 3px;
    float: right;
    cursor: pointer;
    color: #fff;
}