`
qhd_liwei
  • 浏览: 104505 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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
分享到:
评论

相关推荐

    jsp页面同时弹出页面和对话框

    尽管两种方法都能有效实现在JSP页面中弹出对话框的需求,但根据项目具体需求、浏览器兼容性考虑以及用户体验设计,选择合适的方法至关重要。`window.open`方法提供了灵活性和广泛的浏览器支持,适用于简单或特定场景...

    Jsp页面使用jquery ui制作弹出层的详细方法

    本篇文章将详细介绍如何在JSP页面中使用jQuery UI来实现弹出层的功能。 首先,我们需要理解jQuery UI的核心组件——Modal Dialog(模态对话框),它是jQuery UI中的一个强大工具,可以创建一个阻塞用户界面的弹出...

    jsp+sql+javabean用户登录页面

    用户在登录页面login.jsp的两个文本框中分别输入用户名和密码,若输入正确(即:输入的数据和数据库中的数据相一致,使用JavaBean验证)则弹出对话框,显示提示信息“登录成功,确定后即可进行管理操作!”,否则提示...

    html+javascript实现可拖动可提交的弹出层对话框效果

    本文将探讨如何使用HTML和JavaScript来实现一个功能丰富的可拖动、可提交的弹出层对话框效果。这种对话框能够为用户提供更加直观的操作界面,比如编辑数据并直接提交,同时允许用户通过拖动调整其在页面上的位置。 ...

    jquery实现弹出窗口

    首先,jQuery 弹出窗口通常被称为模态对话框(Modal Dialog),它是一种覆盖在主页面上的浮动窗口,用户必须与该窗口交互后才能继续操作主页面。这种设计可以用于显示警告、确认信息或表单输入等场景。 实现弹出...

    java dialog弹出层实例

    - Java Swing提供了`javax.swing.JOptionPane`类,可以创建简单的对话框,如信息对话框、警告对话框、确认对话框和输入对话框。这些对话框是模态的,意味着用户必须先关闭对话框才能继续与主应用程序交互。 - ...

    Struts2资源文件在jsp页面中显示乱码解决

    3. 点击`New Remote Site`,在弹出的对话框中,`Name`栏填写“PropEdit”,`URL`栏输入`http://propedit.sourceforge.jp/eclipse/updates/`。 4. 在`Sites to include in search`列表中,仅保留刚刚添加的站点,移除...

    asp+ajax弹出框

    在这个场景中,“asp+ajax弹出框”指的是使用ASP技术来实现后端逻辑,并通过AJAX调用来更新前端显示一个弹出对话框的功能。 在Google的检索中,当你输入查询并点击搜索时,可能会看到一个下拉框,显示出与你输入...

    JSP实用技巧集合,jsp编程的一些小技巧总结

    33. 实现在页面上添加一行输入对话框 34. 制作验证码图片? 35. 图片缩小放大功能 36. 点击输入框弹出日期选择? 37. 在图片上传前查看自己要上传的图片? 38. 在图片排列的页面上选中一个图片,然后把它删掉? 39. 显示...

    基于jsp的学生信息管理系统

    在确认操作前,通常会弹出确认对话框,防止误操作导致数据丢失。 此外,系统的安全性也是关键考虑因素。为了防止SQL注入攻击,开发者需要对用户输入的数据进行过滤和转义。同时,为了保护用户隐私,敏感信息如密码...

    jsp中点击图片弹出文件上传界面及预览功能的实现

    在JSP页面中,我们通常使用`&lt;input type="file"&gt;`标签来创建一个文件选择控件。但是,为了美观和用户体验,我们可以将其设置为不可见或者透明。在上述代码中,通过CSS样式将`input[type="file"]`元素设置为绝对定位...

    JSP实现文件的上传下载视频教程

    - 设置响应的HTTP头信息,如`Content-Type`表示文件类型,`Content-Disposition`设置为附件,附加文件名,这样浏览器会弹出保存对话框。 - 服务器读取文件内容,并通过HTTP响应发送到客户端,用户可以选择保存或...

    不错的弹出框-asyncbox

    在这个文件中,我们可能会看到如何在JSP页面上引入asyncbox库,以及如何调用其提供的API来创建和控制弹出框。 asyncbox文件可能是库的核心代码,包含了实现弹出框功能的JavaScript函数和可能的CSS样式。通过分析这...

    JSP实验11(11月17日)的实验内容和源代码

    用户在登录页面的两个文本框中分别输入用户名和密码,若输入正确(即:输入的数据和数据库中的数据相一致)则弹出对话框,显示提示信息“登录成功,确定后即可进行管理操作!”,否则提示“登录失败。用户名或密码...

    jsp编程技巧集锦

    实现在页面上添加一行输入对话框 34. 制作验证码图片? 35. 图片缩小放大功能 36. 点击输入框弹出日期选择? 37. 在图片上传前查看自己要上传的图片? 38. 在图片排列的页面上选中一个图片,然后把它...

    jsp的常用特效和js的常用特效

    2. **事件处理**:JavaScript可以监听并响应用户的交互事件,如点击、滚动、输入等,从而实现动态交互效果,如弹出对话框、动画过渡等。 3. **AJAX异步请求**:利用XMLHttpRequest对象,JavaScript可以实现页面无...

    编辑器(jsp代码示例)

    9. `dialog`:可能包含弹出对话框的相关文件,如文件上传或确认操作。 10. `js`:JavaScript文件夹,存放了编辑器的JavaScript代码,处理用户交互和编辑器逻辑。 这个JSP代码示例编辑器可能涉及的知识点包括: 1. ...

    java jsp JScript技术组件

    4. **显示窗口蒙版**:窗口蒙版(Modal)常用于创建弹出式对话框,它可以遮盖住背景页面,让用户专注于当前的操作。在JSP中,可以利用JavaScript库如jQuery的modal插件或者React、Vue等现代前端框架来实现。 5. **...

    showModalDialog实例

    在这个实例中,它被用来实现一个网页的弹出窗口,通常用于数据输入或者确认操作等场景。以下是详细的说明: 1. **BackTap.jsp**:这是主页面,它调用了`showModalDialog`函数来打开一个新的窗口`Doback.jsp`。在`...

Global site tag (gtag.js) - Google Analytics