DIV嵌套显示问题
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>选择参培人员</TITLE><META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Content-Type" content="text/html; charset=gb2312">
<link rel="stylesheet" type="text/css" href="jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui/demo.css">
<script type="text/javascript" src="jquery-easyui/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="jquery-easyui/jquery.easyui.min.js"></script>
<style type="text/css">
body{ border:0px; margin:0px; padding:0px; font-size:12px;}
#main{ overflow:hidden;width:600px;margin:0 auto; }
#left{float:left; width:300px;}
#center{float:left; width:150px;}
#right{ overflow:hidden;width:150px;}
</style>
<SCRIPT LANGUAGE="JavaScript">
function change(){
$('#main').dialog({
title: '请选择参加培训人员',
width: 650,
height: 380,
closed: false,
cache: false,
modal: true
});
}
</script>
</HEAD>
<BODY TEXT="000000" BGCOLOR="FFFFFF" >
<p align="center"><img src="jquery-easyui/themes/icons/right22.gif" class="pointer" onClick="change()"/><br/><br/></p>
<FORM METHOD=post ACTION='peixunjilu_add_s.asp' NAME='_wAddress'>
<div id="main" style="visibility: hidden;">
<div id="left"> <div class="easyui-layout" style="width:300px;height:300px;">
<div data-options="region:'west',split:true" title="请选择部门" style="width:150px;"><ul id="tt" class="easyui-tree" data-options="url:'jquery-easyui/tree_data.asp',animate:true"></ul></div>
<div data-options="region:'center',split:true" title="待选人员" style="width:150px;"><ul style="margin:0px; padding:0px; text-align:center"><select NAME="tmpleftList" id="leftList" multiple="multiple" style="width:141px;height: 265px;" ondblclick="changeValue();document.forms[0].tmprightListRef.value=selectToString(fieldAddress);" onKeyPress="if (window.event.keyCode==13){ AddClick(fieldAddress); document.forms[0].tmprightListRef.value=selectToString(fieldAddress);}"></select></ul>
</div>
</div>
</div>
<div id="center" >
<ul style="padding-left:5px;padding-top:0px; margin:0px">
<div id="p" class="easyui-panel" style="width:140px;height:300px;padding:5px;" data-options="noheader:true">
<br/>
<p align="center"><img src="jquery-easyui/themes/icons/right22.gif" class="pointer" onClick="changeAllValue()"/><br/><br/></p>
<p align="center"><img src="jquery-easyui/themes/icons/right11.gif" class="pointer" onClick="changeValue()"/><br/><br/></p>
<p align="center"><img src="jquery-easyui/themes/icons/left11.gif" class="pointer" onClick="deleteValue()"/><br/><br/></p>
<p align="center"><img src="jquery-easyui/themes/icons/left22.gif" class="pointer" onClick="deleteAllValue()"/><br/><br/></p>
<p align="center"><font color="red">注：支持通过SHIFT或CTRL键选择多个联系人进行添加删除操作</font></p>
</div>
</ul>
</div>
<div id="right">
<div class="easyui-layout" style="width:150px;height:300px;">
<div data-options="region:'center',split:true" title="已选人员" style="width:150px;">
<ul style="margin:0px; padding:0px; text-align:center"><select NAME="tmprightList" id="rightList" multiple="multiple" style="width:141px;height: 265px;" ondblclick="deleteValue();document.forms[0].tmprightListRef.value=selectToString(fieldAddress);" onKeyPress="if (window.event.keyCode==13){ RemoveClick(tmprightList); document.forms[0].tmprightListRef.value=selectToString(fieldAddress);}"></select></ul>
</div></div>
</div>
<div data-options="region:'south',border:false" style="text-align:center;padding:5px 0 0;width:600px;">
<a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" href="javascript:void(0)" onclick="OKClick()">确认</a>
<a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" href="javascript:void(0)" onclick="CancelClick()">取消</a>
</div>
</div>
</FORM>
</BODY>
</HTML>
我想在点击onClick="change()"的时候才将<div id="main" style="visibility: hidden;">层中所有的全部显示出来。
问题是不加style="visibility: hidden;"时候是接显示出来，加了之后，点击onClick="change()"，只能显示最外面一层，里面的全是空白。
谢谢指教！
[解决办法]
先显示后再调用dialog
function change(){
$('#main').css('visibility','visible').dialog({
title: '请选择参加培训人员',
width: 650,
height: 380,
closed: false,
cache: false,
modal: true
});
}