js中模态对话框(showModalDialog)示例

1.commune_create.jsp
<%@ page contentType="text/html;charset=GBK" %>
<%@ include file="/page/common/taglibs.jsp"%>

<HTML>
<HEAD>
<TITLE>系统主操作区页面模板</TITLE>

<LINK href="${ctx}/etc/css/eoms.css" type=text/css rel=stylesheet>
<script>
   function openSelectAdmin(){
     var reval=window.showModalDialog("${ctx}/page/selectadmin/admin_select.jsp","","dialogHeight=400px; dialogWidth=500px;status=no");
     var admin="";
     for(var i=0;i<reval.length;i=i+2)
        admin=admin+reval[i]+",";
     admin=admin.substring(0,admin.length-1);
     document.all("admin").value=admin; 

   }
</script>
</HEAD>
<BODY>
<!--页面标题栏begin-->
<TABLE class=table-location cellSpacing=0 cellPadding=0 align=center border=0>
  <TBODY>
  <TR>
    <TD width="15%"><IMG height=10 src="${ctx}/etc/img/moreblue.gif" 
      width=21>&nbsp;您所在位置:</TD>
    <TD align=left width="85%">
      <DIV id=pageTitle></DIV></TD></TR></TBODY></TABLE><!--页面标题栏end--><!--页面框架begin-->
<TABLE class=table-frame cellSpacing=1 cellPadding=2 align=center border=0>
  <TBODY>
  <TR>
    <TD><!--内容页面begin-->
      <FORM  action="sqgl_communityMakeList.htm"   method="post" encType="multipart/form-data">

      <TABLE class=table-table>
        <TBODY>
        <TR>
          <TD class=table-title colSpan=6><IMG src="${ctx}/etc/img/yuan.jpg" 
            align="absMiddle">创建社区</TD>
        </TR></TBODY></TABLE>
      <TABLE class=table-table>
        <TBODY>
          <TR>
          <TD width="13%" class=bgcolor>社区名称<FONT color=red>**</FONT></TD>
          <TD width="86%"><INPUT class=input style="WIDTH: 80%" name=title 
            maxlengh="100"></TD>
        </TR>
          <TR>
          <TD class=bgcolor>社区管理员<FONT color=red>**</FONT></TD>
          <TD>
            <INPUT type="text" class=input style="WIDTH: 80%" name="admin" 
            maxlengh="100"><input type="button" value="选择" onClick="openSelectAdmin()">
          </TD>
        </TR>
          <TR>
          <TD class=bgcolor>社区权限<FONT color=red>**</FONT></TD>
          <TD>
            <input type="radio" name="radiobutton" value="radiobutton" checked="checked">
            允许任何用户加入本社区&nbsp;&nbsp;
            <input type="radio" name="radiobutton" value="radiobutton">需要社区管理员审批才能加入本社区</TD>
        </TR>
        <TR>
          <TD class=bgcolor>社区描述</TD>
          <TD><TEXTAREA class=text-area style="WIDTH: 100%" name=digest rows=10></TEXTAREA></TD></TR></TBODY></TABLE>
      <BR>
      <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
        <TBODY>
        <TR>
          <TD class=table-button><INPUT class="long"  type="submit" value="提交" name="Submit2"> 
<INPUT class="long" type="reset" value="取消"></TD></TR></TBODY></TABLE></FORM><!--内容页面end--></TD></TR></TBODY></TABLE>

</BODY>
</HTML>



2.admin_select.jsp
<%@ page contentType="text/html;charset=GBK"%>
<%@ include file="/page/common/taglibs.jsp"%>
<html>
<head>
<title>选择管理员</title>
<link href="${ctx}/etc/css/eoms.css" type=text/css rel=stylesheet>
<script type="text/javascript" src="${ctx}/etc/js/option.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/dwr/interface/userManagerService.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/dwr/engine.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/dwr/util.js"></script>
<script>
function search(){
  var username=document.all.username.value;
  if(username.length>0){
		userManagerService.findUsersByNickName(username,userReturn);	
  }else{
	  alert("请输入要查询的管理员名字");
	  document.all.username.focus();
  }
	
 }
 
 function userReturn(data){
    
    var adminLeft=document.getElementById("leftItem");
    DWRUtil.removeAllOptions(adminLeft);
	DWRUtil.addOptions(adminLeft,data);
 
 
 }
	
function selectAdmin(){
	
	var retval=new Array();
	var admin=document.all("rightItem");
	for(var i=0;i<admin.length;i++){
	      retval.push(admin[i].text);    //将管理员的nickname保存在数组中 
	      retval.push(admin[i].value);   //将管理员的name保存在数组中
	    
	
	}
	  window.returnValue=retval;   //将选择的值回传到父页面上 
	  parent.window.close();  
	}
	
</script>
</head>
<body>
<br>
<table border="0" align="center" width="55%" cellspacing="0" cellpadding="0">
	<tr>
		<td colspan="2" height="20"><strong>管理员查询</strong></td>
	</tr>
	<tr>
		<td><input type="text" name="username"  size="30"></td>
		<td><input type="button" onclick="search()" value="查询" ></td>
	</tr>
</table>
<br>
<table border="0" align="center" width="75%" cellspacing="0" cellpadding="0">   
  <tr>
    <td>已查询的管理员</td>
    <td>&nbsp;</td>
    <td>已选择的管理员</td>
  </tr>
   <tr>   
     <td>   
       <table border="0">   
         <tr> 
           <td>   
             <select name="leftItem" style="width:200px" size="10" multiple="multiple">   
                 
             </select>   
           </td>   
          </tr>   
       </table>   
     </td>   
     <td>   
       <table border="0">   
         <tr><td height="30"><input type="button" name="button1" style="width:50px" value=">" onClick="fMoveSelectedOptionsLeftToRight(document.all.leftItem,document.all.rightItem)"></td></tr>   
         <tr><td height="30"><input type="button" name="button2" style="width:50px" value=">>"  
         onClick="fMoveAllOptionsLeftToRight(document.all.leftItem,document.all.rightItem)"></td></tr>   
         <tr><td height="30"><input type="button" name="button3" style="width:50px" value="<"  
         onClick="fMoveSelectedOptionsRightToLeft(document.all.leftItem,document.all.rightItem)"></td></tr>   
         <tr><td height="30"><input type="button" name="button4" style="width:50px" value="<<"  
          onClick="fMoveAllOptionsRightToLeft(document.all.leftItem,document.all.rightItem)"></td></tr>   
       </table>   
     </td>   
     <td>   
      <table border="0"  align="center">   
         <tr>   
           <td>   
             <select name="rightItem" style="width:200px" size="10" multiple="multiple">   
             </select>   
           </td>   
          </tr>   
       </table>   
     </td>   
    </tr>   
 </table>   
 <table border="0" align="center">   
   <tr height="40">   
     <td><input type="button" value="确定" onClick="selectAdmin()"></td>   
   </tr>   
 </table>  
</body>
</html>

你可能感兴趣的:(html,jsp,框架,DWR)