DIV嵌套显示有关问题

2013-04-12

DIV嵌套显示问题!DOCTYPE htmlHTMLHEADTITLE选择参培人员/TITLEMETA HTTP-EQUIVPragma CONT

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
});


}

热点排行

ASP

DIV嵌套显示有关问题