随笔 - 63  文章 - 72  评论 - 951  阅读 - 140万 

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

突然想了解下js实现模态窗口，所以就去找了下，下面的虽然是jsp的，但是不妨碍我们理解。
转自：http://penghuaiyi.javaeye.com/blog/240723
 
1.commune_create.jsp
Java代码 复制代码
  1. <%@ page contentType="text/html;charset=GBK" %>   
  2. <%@ include file="/page/common/taglibs.jsp"%>   
  3.   
  4. <HTML>   
  5. <HEAD>   
  6. <TITLE>系统主操作区页面模板</TITLE>   
  7.   
  8. <LINK href="${ctx}/etc/css/eoms.css" type=text/css rel=stylesheet>   
  9. <script>   
  10.    function openSelectAdmin(){   
  11.      var reval=window.showModalDialog("${ctx}/page/selectadmin/admin_select.jsp","","dialogHeight=400px; dialogWidth=500px;status=no");   
  12.      var admin="";   
  13.      for(var i=0;i<reval.length;i=i+2)   
  14.         admin=admin+reval[i]+",";   
  15.      admin=admin.substring(0,admin.length-1);   
  16.      document.all("admin").value=admin;    
  17.   
  18.    }   
  19. </script>   
  20. </HEAD>   
  21. <BODY>   
  22. <!--页面标题栏begin-->   
  23. <TABLE class=table-location cellSpacing=0 cellPadding=0 align=center border=0>   
  24.   <TBODY>   
  25.   <TR>   
  26.     <TD width="15%"><IMG height=10 src="${ctx}/etc/img/moreblue.gif"    
  27.       width=21>&nbsp;您所在位置：</TD>   
  28.     <TD align=left width="85%">   
  29.       <DIV id=pageTitle></DIV></TD></TR></TBODY></TABLE><!--页面标题栏end--><!--页面框架begin-->   
  30. <TABLE class=table-frame cellSpacing=1 cellPadding=2 align=center border=0>   
  31.   <TBODY>   
  32.   <TR>   
  33.     <TD><!--内容页面begin-->   
  34.       <FORM  action="sqgl_communityMakeList.htm"   method="post" encType="multipart/form-data">   
  35.   
  36.       <TABLE class=table-table>   
  37.         <TBODY>   
  38.         <TR>   
  39.           <TD class=table-title colSpan=6><IMG src="${ctx}/etc/img/yuan.jpg"    
  40.             align="absMiddle">创建社区</TD>   
  41.         </TR></TBODY></TABLE>   
  42.       <TABLE class=table-table>   
  43.         <TBODY>   
  44.           <TR>   
  45.           <TD width="13%" class=bgcolor>社区名称<FONT color=red>**</FONT></TD>   
  46.           <TD width="86%"><INPUT class=input style="WIDTH: 80%" name=title    
  47.             maxlengh="100"></TD>   
  48.         </TR>   
  49.           <TR>   
  50.           <TD class=bgcolor>社区管理员<FONT color=red>**</FONT></TD>   
  51.           <TD>   
  52.             <INPUT type="text" class=input style="WIDTH: 80%" name="admin"    
  53.             maxlengh="100"><input type="button" value="选择" onClick="openSelectAdmin()">   
  54.           </TD>   
  55.         </TR>   
  56.           <TR>   
  57.           <TD class=bgcolor>社区权限<FONT color=red>**</FONT></TD>   
  58.           <TD>   
  59.             <input type="radio" name="radiobutton" value="radiobutton" checked="checked">   
  60.             允许任何用户加入本社区&nbsp;&nbsp;   
  61.             <input type="radio" name="radiobutton" value="radiobutton">需要社区管理员审批才能加入本社区</TD>   
  62.         </TR>   
  63.         <TR>   
  64.           <TD class=bgcolor>社区描述</TD>   
  65.           <TD><TEXTAREA class=text-area style="WIDTH: 100%" name=digest rows=10></TEXTAREA></TD></TR></TBODY></TABLE>   
  66.       <BR>   
  67.       <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>   
  68.         <TBODY>   
  69.         <TR>   
  70.           <TD class=table-button><INPUT class="long"  type="submit" value="提交" name="Submit2">    
  71. <INPUT class="long" type="reset" value="取消"></TD></TR></TBODY></TABLE></FORM><!--内容页面end--></TD></TR></TBODY></TABLE>   
  72.   
  73. </BODY>   
  74. </HTML>  


2.admin_select.jsp
Java代码 复制代码
  1. <%@ page contentType="text/html;charset=GBK"%>   
  2. <%@ include file="/page/common/taglibs.jsp"%>   
  3. <html>   
  4. <head>   
  5. <title>选择管理员</title>   
  6. <link href="${ctx}/etc/css/eoms.css" type=text/css rel=stylesheet>   
  7. <script type="text/javascript" src="${ctx}/etc/js/option.js"></script>   
  8. <script type="text/javascript" src="<%=request.getContextPath() %>/dwr/interface/userManagerService.js"></script>   
  9. <script type="text/javascript" src="<%=request.getContextPath() %>/dwr/engine.js"></script>   
  10. <script type="text/javascript" src="<%=request.getContextPath() %>/dwr/util.js"></script>   
  11. <script>   
  12. function search(){   
  13.   var username=document.all.username.value;   
  14.   if(username.length>0){   
  15.         userManagerService.findUsersByNickName(username,userReturn);       
  16.   }else{   
  17.       alert("请输入要查询的管理员名字");   
  18.       document.all.username.focus();   
  19.   }   
  20.        
  21.  }   
  22.     
  23.  function userReturn(data){   
  24.        
  25.     var adminLeft=document.getElementById("leftItem");   
  26.     DWRUtil.removeAllOptions(adminLeft);   
  27.     DWRUtil.addOptions(adminLeft,data);   
  28.     
  29.     
  30.  }   
  31.        
  32. function selectAdmin(){   
  33.        
  34.     var retval=new Array();   
  35.     var admin=document.all("rightItem");   
  36.     for(var i=0;i<admin.length;i++){   
  37.           retval.push(admin[i].text);    //将管理员的nickname保存在数组中    
  38.           retval.push(admin[i].value);   //将管理员的name保存在数组中   
  39.            
  40.        
  41.     }   
  42.       window.returnValue=retval;   //将选择的值回传到父页面上    
  43.       parent.window.close();     
  44.     }   
  45.        
  46. </script>   
  47. </head>   
  48. <body>   
  49. <br>   
  50. <table border="0" align="center" width="55%" cellspacing="0" cellpadding="0">   
  51.     <tr>   
  52.         <td colspan="2" height="20"><strong>管理员查询</strong></td>   
  53.     </tr>   
  54.     <tr>   
  55.         <td><input type="text" name="username"  size="30"></td>   
  56.         <td><input type="button" onclick="search()" value="查询" ></td>   
  57.     </tr>   
  58. </table>   
  59. <br>   
  60. <table border="0" align="center" width="75%" cellspacing="0" cellpadding="0">      
  61.   <tr>   
  62.     <td>已查询的管理员</td>   
  63.     <td>&nbsp;</td>   
  64.     <td>已选择的管理员</td>   
  65.   </tr>   
  66.    <tr>      
  67.      <td>      
  68.        <table border="0">      
  69.          <tr>    
  70.            <td>      
  71.              <select name="leftItem" style="width:200px" size="10" multiple="multiple">      
  72.                     
  73.              </select>      
  74.            </td>      
  75.           </tr>      
  76.        </table>      
  77.      </td>      
  78.      <td>      
  79.        <table border="0">      
  80.          <tr><td height="30"><input type="button" name="button1" style="width:50px" value=">" onClick="fMoveSelectedOptionsLeftToRight(document.all.leftItem,document.all.rightItem)"></td></tr>      
  81.          <tr><td height="30"><input type="button" name="button2" style="width:50px" value=">>"     
  82.          onClick="fMoveAllOptionsLeftToRight(document.all.leftItem,document.all.rightItem)"></td></tr>      
  83.          <tr><td height="30"><input type="button" name="button3" style="width:50px" value="<"     
  84.          onClick="fMoveSelectedOptionsRightToLeft(document.all.leftItem,document.all.rightItem)"></td></tr>      
  85.          <tr><td height="30"><input type="button" name="button4" style="width:50px" value="<<"     
  86.           onClick="fMoveAllOptionsRightToLeft(document.all.leftItem,document.all.rightItem)"></td></tr>      
  87.        </table>      
  88.      </td>      
  89.      <td>      
  90.       <table border="0"  align="center">      
  91.          <tr>      
  92.            <td>      
  93.              <select name="rightItem" style="width:200px" size="10" multiple="multiple">      
  94.              </select>      
  95.            </td>      
  96.           </tr>      
  97.        </table>      
  98.      </td>      
  99.     </tr>      
  100.  </table>      
  101.  <table border="0" align="center">      
  102.    <tr height="40">      
  103.      <td><input type="button" value="确定" onClick="selectAdmin()"></td>      
  104.    </tr>      
  105.  </table>     
  106. </body>   
  107. </html>  
posted on   stg609  阅读(1615)  评论(0)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 地球OL攻略 —— 某应届生求职总结
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· .NET周刊【3月第1期 2025-03-02】
· [AI/GPT/综述] AI Agent的设计模式综述
分享按钮
点击右上角即可分享
微信分享提示
SQL AI 助手