Jsp页面弹出输入对话框的实现

使用DHTML,可以有两种实现方法:
1.通过window.open方法以弹出页面方式实现。
2.通过window.showModalDialog方法以弹出对话框方式实现。(推荐)
一.通过window.open方法弹出对话框
在写JSP页面的时候,有时需要点击一个按钮弹出一个输入对话框,然后输入一个值,确定后关闭对话框,把数据写入数据库,刷新当前页面。这样的功能可以用JavaScript实现;不过如果用js自带的对话框的话,对话框不美观,不如用一个JSP页面来做对话框。
   在页面AddName.jsp里要调用对话框,写一个JSP页面NewBox.jsp(用做对话框),然后在页面AddName.jsp里加上一段js代码:
/*用来打开对话框页面*/
function openwindow(){
         window.open ("NewBox.jsp","Sample","fullscreen=no,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no, copyhistory=no,width=350,height=140,left=200,top=300");
       }            
/*在NewBox.jsp里调用这个函数,用来刷新AddName.jsp*/    
function opensub(){
  document.form1.submit();
       }  
在这里要对window.open里的参数做一下说明:
   fullscreen=no 窗口模式,yes为全屏模式
   toolbar=no, 显示工具条
  location=no,显示网址栏
  directories=no,导航条
  status=no,状态条
  menubar=no,菜单
  scrollbars=no,滚动条
  resizable=no,是否可以改变大小
  copyhistory=no,历史按钮
  width=350,宽
  height=140'高
  left=200,距离左边200
  top=300,距离顶端300
这时要在NewBox.jsp里加上一部分js代码,下面是NewBox.jsp的代码
 
<html>
  <head >
    <title>新建邮件夹输入框</title>
    <SCRIPT>
      <!--
        function bconfirm(){
           opener.document.all['inboxname'].value=document.form1.inboxname.value;
           opener.opensub();
           window.close();
        }
      
       function bcancel(){
           window.close();
        }
      -->
    </SCRIPT>
  </head>                               
                  
  <body bgcolor=#66CD00>
    <FONT size=5>请输入新邮件夹的名称:</FONT>
    <FORM method=post name=form1 action="">
      <INPUT type=text name=inboxname size=35><p>
      <INPUT type=button name=inputboxbt value=确定 onclick="bconfirm();">
      <INPUT type=button name=inputboxbs value=取消 onclick="bcancel();">
    </FORM>
  
  </body>
</html>
在NewBox.jsp里先给AddName.jsp里的一个隐藏表单inboxname赋值,就是这句:
  opener.document.all['inboxname'].value=document.form1.inboxname.value;
  然后调用AddName.jsp里的一个js函数:opener.opensub();
这样AddName.jsp就会自动提交表单到Servlet接着刷新页面,这样就完成了!


二.通过window.showModalDialog方法弹出对话框。(推荐)
    仍然是在页面AddName.jsp里要调用对话框,写一个JSP页面NewBox.jsp(用做对话框),然后在页面AddName.jsp里加上一段js代码:
/*用来打开对话框页面,注意这回openwindow()函数里的的方法是window.showModalDialog*/

function openwindow(){
         window.showModalDialog("NewBox.jsp",window,"status:no;scroll:no;
dialogWidth:235px;dialogHeight:100px");
       }            
/*在NewBox.jsp里调用这个函数,用来刷新AddName.jsp*/    
function opensub(){
  document.form1.submit();
       }

对window.showModalDialog里的参数简单做一下说明:
center : yes | no | 1 | 0 | on | off  指定对话框是否显示于桌面正中。默认值为 yes 。
dialogHide : yes | no| 1 | 0 | on | off  指定当打印或打印预览时对话框是否隐藏。仅仅当对话框是由被信任的程式打开的时候此参数才可用。默认值为 no 。
edge : sunken | raised  指定对话框窗口边框样式为凹下还是凸起的。默认值为 raised 。
resizable : yes | no | 1 | 0 | on | off   指定对话框是否可以被用户改变尺寸。默认值为 no 。
scroll : yes | no | 1 | 0 | on | off   指定对话框是否显示滚动条。默认值为 yes 。
status : yes | no | 1 | 0 | on | off  指定对话框是否显示状态条。对于不被信任的对话框默认值为 yes 。对于被信任的对话框默认值为 no 。
unadorned : yes | no | 1 | 0 | on | off   指定对话框是否显示 chrome 样式边框。仅仅当对话框是由被信任的程式打开的时候此参数才可用。默认值为 no 。

另外,在NewBox.jsp的javaScript代码bconfirm()方法中:
<SCRIPT>
      <!--
        function bconfirm(){
          dialogArguments.addNameform.inboxname.value=document.form1.
inboxname.value;
           dialogArguments.opensub();
           window.close();
        }
        function bcancel(){
           window.close();
        }
      -->
    </SCRIPT>

注:addNameform为AddName.jsp中隐藏表单name,使用window.showModalDialog方法是要用dialogArguments传递参数。其他部分不变。

本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/FlyByDream/archive/2007/08/08/1731725.aspx

你可能感兴趣的:(JavaScript,.net,jsp,servlet,chrome)