`

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

DWRJSP框架HTML 
阅读更多
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>
分享到：
| Java操作Excel总结
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    使用selenium测试showModalDialog模态对话框

    `showModalDialog` 是一个古老的浏览器API，用于创建模态对话框，它会阻塞页面的JavaScript执行，直到对话框关闭。由于 Selenium 的执行依赖于JavaScript，因此在模态对话框打开时，Selenium 无法与对话框交互，导致...

    javascript 页面刷新和模态对话框 学习总结 推荐哦

    本文介绍了JavaScript中页面刷新的多种方法以及如何在模态对话框中实现页面刷新。这些技术对于Web开发来说非常重要，可以帮助开发者更好地控制页面行为，提升用户体验。通过以上介绍，希望能帮助读者更好地理解和...

    利用模态对话框实现父窗体、子窗体间传值

    首先，`showModalDialog` 是一个在浏览器环境中（主要是Internet Explorer）用于打开一个新的窗口或模态对话框的JavaScript函数。它的主要优点是能够阻止用户在对话框关闭前与页面其他部分进行交互，从而引导用户...

    利用javascript打开模态对话框(示例代码)

    本文主要介绍如何使用JavaScript来打开模态对话框，并提供了相关的示例代码。 首先，我们来看看什么是模态对话框以及它的工作原理。模态对话框是一种覆盖在父页面之上的悬浮层，它阻止用户与父页面的其它部分进行...

    谷歌浏览器不支持showModalDialog模态对话框的解决方法

    在网页开发中，`showModalDialog` 是一个老式的JavaScript函数，它允许创建一个模态对话框，用户必须与该对话框交互后才能继续与主窗口进行交互。然而，随着浏览器的发展，特别是谷歌浏览器（Chrome）对Web标准的...

    JavaScript 实现模态对话框 源代码大全

    在浏览器端，可以通过JavaScript提供的两种方法来实现模态对话框和非模态对话框，分别是`window.showModalDialog()`和`window.showModelessDialog()`。 **window.showModalDialog()方法**用于创建模态对话框。该...

    showModalDialog模态对话框的使用详解以及浏览器兼容

    `showModalDialog`是JavaScript `window`对象的一个方法，它用于打开一个新的模态对话框，与`window.open`相似但有所不同。主要的区别在于，当使用`showModalDialog`打开一个子窗口时，父窗口会失去焦点，用户无法与...

    JS 弹出对话框window.showModalDialog（）

    在JavaScript中，`window.showModalDialog()` 是一个非标准但广泛使用的API，用于创建模态对话框。模态对话框是一种阻止用户与主窗口交互直至关闭对话框的弹出窗口。这种方法特别适用于需要用户输入或确认某些信息的...

    JS打开模式对话框

    JavaScript（简称JS）是一种广泛用于客户端Web开发的脚本语言，它可以实现动态交互的效果，而JS打开模式对话框则是提供了一种与用户交互的方式。在本文中，我们将深入探讨两种主要的JS对话框方法：`showModalDialog...

    window.showModalDialog(javascript)

    总之，`window.showModalDialog()`是JavaScript中创建模态对话框的一种方法，主要用于提供一种用户交互的方式。然而，由于跨浏览器兼容性和用户体验的考虑，开发者在实际应用中需要谨慎使用，并考虑使用现代Web技术...

    html 模态窗口使用

    尽管`window.showModalDialog()`和`window.showModelessDialog()`为IE提供了一种创建模态和非模态对话框的简便方法，但考虑到IE的市场份额不断下降以及对现代Web标准的支持不足，开发者应考虑使用更广泛的跨浏览器...

    showModalDialog和showModelessDialog使用心得

    `showModalDialog` 方法创建的是一个模态对话框，这意味着当这个对话框打开时，用户无法与主页面或其他非模态对话框进行交互，直到关闭当前对话框。这在需要用户做出决策或输入信息的情况下非常有用，因为它可以确保...

    showModalDialog

    总结起来，`showModalDialog`是JavaScript提供的一种创建模态对话框的方式，尽管存在一些局限性，但在特定场景下仍不失为一种实用的工具。了解并熟练掌握其使用，可以帮助开发者更好地构建交互式Web应用。

    Window.ShowModalDialog使用手册_对话框 .txt

    `Window.ShowModalDialog` 是一个在 Internet Explorer 浏览器中特有的方法，用于创建模态对话框。此方法允许开发者在一个新的窗口中打开一个HTML页面，并且这个新窗口将阻止用户与原始窗口交互，直到关闭为止。此外...

    JS中showModalDialog 详细使用.txt

    在现代Web应用开发中，推荐使用其他技术如模态库或者纯CSS/JavaScript实现模态对话框效果。 综上所述，`showModalDialog` 和 `showModelessDialog` 提供了在Internet Explorer中创建弹出对话框的强大功能，但在实际...

    JS中showModalDialog 的使用解析.docx

    在JavaScript中，`showModalDialog`是一个非常有用的函数，它允许开发者创建模态对话框来增强用户交互体验。模态对话框是一种特殊的窗口，当它打开时，用户必须先关闭这个对话框才能继续与主窗口进行交互。这与非...

    window.showModalDialog的基本用法

    此外，还有一个类似的函数 `window.showModelessDialog`，该函数同样可以在 IE5.0 及以上版本中使用，但打开的是非模态对话框窗口。 #### 基本语法 ```javascript vReturnValue = window.showModalDialog(sURL, ...

    js对话框传递参数

    在JavaScript中，通过对话框进行参数传递是一种常见的交互方式，尤其在需要弹出一个模态对话框并与其进行数据交换的场景下更为常见。本文将详细介绍如何利用`window.showModalDialog()`方法来实现这种参数传递，并...

Magicbox
Global site tag (gtag.js) - Google Analytics