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

最新推荐文章于 2020-05-13 13:18:43 发布
最新推荐文章于 2020-05-13 13:18:43 发布
阅读量351 收藏
点赞数
分类专栏： JavaScript总结 文章标签： DWR JSP 框架 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> 您所在位置：</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">
            允许任何用户加入本社区  
            <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> </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>

penghuaiyi2008
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js showModalDialog 弹出对话框的简单实例(子窗体)
12-10
<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”showdialog_dialog.aspx.cs” Inherits=”WSHelpDoc_showdialog_dialog” %> 代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><html xmlns=”http://www.w3.org/1999/xhtml” ><head
利用javascript打开模态对话框(示例代码)
12-12
1. 标准的方法 代码如下:[removed] function openWin(src, width, height, showScroll){ window.showModalDialog (src,””,”location:No;status:No;help:No;dialogWidth:”+width+”;dialogHeight:”+height+”;...
JavaScript实现模态对话框
琉璃仙境
04-21 8892
  今天哈尔滨今日图灵学校的朋友谈起js实现模态窗口，看俺是孤陋寡闻，遂演示了一番，原来不就是弹窗对话框之类的么！！javascript不是用window.open实现  么，刚发表一番言论 发现不对 这不是一个简单的网页对话框，我无法让它最大  化...，纵观这些功能非常适合针对B/s结构应用程序的开发  抽空查了一下资料如梦方醒，这里整理如下  首先，来说一下对话框  对话框在Wi
JavaScript----实现简单的模态对话框
weixin_42567323的博客
09-26 672
前言     做一个模态对话框的小例子。 1.简单设计     学了一些js的知识以后，这里就结合HTM和CSS来做一个简单的模态对话框。     要实现的功能：点击添加按钮，就让背景色变成灰色，然后出现一个对话框，在对话框中点击取消，就又回到原来的页面。 2.实现 （1）先实现...
JavaScript 实现模态对话框 源代码大全
wonsoft的专栏
04-30 3923
JavaScript实现模态对话框 一、JavaScript实现模态对话框首先，来说一下对话框：对话框在Windows应用程序中使用非常普遍，许多应用程序的设定，与用户交互需要通过对话框来进行，因此对话框是Windows应用程序中最重要的界面元素之一，是与用户交互的重要手段。对话框是一个特殊的窗口，任何对窗口进行的操作（如移动、最大化、最小化等）也可以在对话框实施。  对话框大致可以分
js之模态对话框
weixin_34280237的博客
12-31 178
目标效果：点击页面按钮，显示模态对话框，在模态对话框里点击取消关闭模式对话框。 效果如下 实现代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </he...
谷歌浏览器不支持showModalDialog模态对话框的解决方法
12-09
在网页开发中，`showModalDialog` 是一个老式的JavaScript函数，它允许创建一个模态对话框，用户必须与该对话框交互后才能继续与主窗口进行交互。然而，随着浏览器的发展，特别是谷歌浏览器（Chrome）对Web标准的...
showModalDialog模态对话框的使用详解以及浏览器兼容
09-04
`showModalDialog`是JavaScript `window`对象的一个方法，它用于打开一个新的模态对话框，与`window.open`相似但有所不同。主要的区别在于，当使用`showModalDialog`打开一个子窗口时，父窗口会失去焦点，用户无法与...
使用selenium测试showModalDialog模态对话框
08-03
`showModalDialog` 是一个古老的浏览器API，用于创建模态对话框，它会阻塞页面的JavaScript执行，直到对话框关闭。由于 Selenium 的执行依赖于JavaScript，因此在模态对话框打开时，Selenium 无法与对话框交互，导致...
JS ＋ ShowModalDialog模态窗口
JRQ 的博客
01-27 8705
关于window.showModalDialog()打开模态窗口的使用方法。备忘。 一、使用方法     vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])     vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFea
showModalDialog实例
08-19
通过实例，详细说明了showModalDialog弹出网页窗口的应用。
ModelDialog JavaScript模态对话框类代码
10-28
ModelDialog JavaScript模态对话框类代码，需要的朋友可以参考下。
使用javascript打开模态对话框
weixin_33995481的博客
05-27 129
1. 标准的方法 &lt;script type="text/javascript"&gt;   function openWin(src, width, height, showScroll){   window.showModalDialog (src,"","location:No;status:No;help:No;dialogWidth:"+width+";dialogHeight:"+...
JavaScript之实例练习（模态对话框详解）
Viewinfinitely的博客
05-13 641
文章目录一、Class的属性二、模态对话框 一、Class的属性 1、class的常用操作 获取对象所有class： elementNode.className 给对象添加class：elementNode.classList.add 给对象去除class：elementNode.classList.remove 2、练习代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&gt
JS中showModalDialog 详细使用
weixin_33913377的博客
07-04 166
基本介绍：          showModalDialog()         (IE 4+ 支持)          showModelessDialog()      (IE 5+ 支持)          window.showModalDialog()                  方法用来创建一个显示HTML内容的模态对话框。          window.showModeles...
JS模拟模式窗口效果
diligentcat的专栏
09-03 1001
JS模拟模式窗口效果     var falpha = 0;     function fchange() {         if (falpha != 90) {             table1.style.filter = "alpha(opacity
showModalDialog的例子
莫冲的专栏
03-28 335
下面是showModalDialog/showModelessDialog使用例子,父窗口向子窗口传递值,子窗口设置父窗口的值,子窗口关闭的时候返回值到父窗口.关闭刷新父窗口,希望对象我这样的WEB开发的菜鸟有所帮助. (一)showModalDialog使用例子,父窗口向子窗口传递值,子窗口设置父窗口的值,子窗口关闭的时候返回值到父窗口. farther.html -----------
模式窗口的相关知识
sakyoneone的专栏
01-02 114
下面是showModalDialog/showModelessDialog使用例子,父窗口向子窗口传递值,子窗口设置父窗口的值,子窗口关闭的时候返回值到父窗口.关闭刷新父窗口,希望对象我这样的WEB开发的菜鸟有所帮助. (一)showModalDialog使用例子,父窗口向子窗口传递值,子窗口设置父窗口的值,子窗口关闭的时候返回值到父窗口. farther.html ------...
真正的模式对话框-js
wumiju的专栏
02-24 3657
真正的模式对话框          /*用来显示模式对话框的方法*/    function show()    {    /*var mValue接收对话框回传的值*/     var mValue=showModalDialog("m.html","向对话框传参","dialogWidth:200px;dialogHeight:200px;status:0;help:0");
JavaScript 模态对话框与全屏窗口操作代码示例
在JavaScript中，`window.showModalDialog()`函数用于打开一个模态对话框，该对话框会阻止用户与页面其他部分的交互，直到关闭对话框。在示例中： ```javascript strFeatures="dialogWidth=500px;dialogHeight=...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值