Jsp页面弹出输入对话框
JSP 查询XML信息
JSP 查询XML信息
本扩展练习的目的是：通过servlet实现JSP页面与XML文档的数据交互。
其中会用到前面创建的PersonInfo.xml文档，当用户在JSP页面中输出要查询的信息单击查询时，会通过servlet所配置的文件对信息进行处理，查询XML是否有该条信息并输出结果。
（1）创建一个命名为Query.jsp的信息查询页面。
【新建】|【JSP （advanced Templates）】命令，弹出【新建JSP页面】对话框，在对话框的文件名称中输入Query.jsp，单击【完成】按钮。
出【新建Java类】对话框，在对话框的文件名称中输入Number.java，单击【完成】按钮。
（4）导入Java文件要用到的Java类包。
在上述代码中，主要实现的功能是对查询页面提交的数据进行处理并输出结果。
在程序中用doPost()方法来接收并处理数据，首先通过response内置对象的setContentType()方法设置当前的编码并实例化PrintWriter对象用于信息的输出；然后接收查询页面提交的编号信息，并根据该编号查询XML文档确定编号是否存在。
如果存在，输出编号的所有信息；否则，输出不存在该编号。
（7）执行述代码，Query.jsp页面显示结果如图9-10所示。
输入编号，单击【提交】按钮，查询结果如图9-11所示。
图9-10 查询页面图9-11 查询结果页面。
iText组件表格的输出
}
//实例化ByteArrayOutputStream对象
ByteArrayOutputStream buffer = new ByteArrayOutputStream();PdfWriter.getInstance(document, buffer);//实现PdfWriter类与document实例的绑定
（2）设置文件jsp文件的编码、服务器语言和程序用到的Java类包。
<%@ page import="java.io.*,java.awt.Color,com.lowagie.text.*,com.lowagie.text.pdf.*"%>
（3）在TablePdf.Jsp文件中输入以下内容并保存。
<%@ page import="java.io.*,java.awt.Color,com.lowagie.text.*,com.lowagie.text.pdf.*"%>
//设置表格的形式
PdfPTable table = new PdfPTable(3);//设置表格列数
//表格的输出
for (int i = 0; i < 12; i++) {
PdfPCell cell = new PdfPCell();
calueOf(i)));//向单元格中添加内容
byte[] bytes = buffer.toByteArray();
response.setContentLength(bytes.length);
for (int i = 0; i < bytes.length; i++) {
jsp页面点击按钮弹出对话框
另外，在NewBox.jsp的javaScript代码bconfirm()方法中：
<SCRIPT>
使用DHTML，可以有两种实现方法：
1.通过window.open方法以弹出页面方式实现。
2.通过window.showModalDialog方法以弹出对话框方式实现。(推荐)
一.通过window.open方法弹出对话框
在写JSP页面的时候，有时需要点击一个按钮弹出一个输入对话框，然后输入一个值，确定后关闭对话框，把数据写入数据库，刷新当前页面。
二.通过window.showModalDialog方法弹出对话框。（推荐）
仍然是在页面AddName.jsp里要调用对话框，写一个JSP页面NewBox.jsp（用做对话框），然后在页面AddName.jsp里加上一段js代码：
/*用来打开对话框页面，注意这回openwindow()函数里的的方法是window.showModalDialog*/
fullscreen=no 窗口模式，yes为全屏模式
toolbar=no, 显示工具条
location=no,显示网址栏
directories=no,导航条
status=no,状态条
menubar=no,菜单
scrollbars=no,滚动条
function openwindow()
{
window.showModalDialog("NewBox.jsp",window,"status:no;scroll:no;
JSP 判断文件是否为空
JSP 判断文件是否为空
在对文件的操作中，有时候会判断文件中内容是否为空并进行相应的操作。
练习中，通过File对象的read()方法读取文件的长度并做出判断。
（1）创建一个命名为FileBlank.jsp的JSP页面。
【新建】|【JSP （advanced Templates）】命令，弹出【新建JSP页面】对话框，在对话框的文件名称中输入FileBlank.jsp，单击【完成】按钮。
（2）添加JSP文件要用到的Java类包、编码。
在上述代码中，首先实例化了一个File对象fr并指定要读取文件的绝对路径，然后通过fr对象的read()方法读取文件的内容。
最后判断文件内容的长度是否为-1，如果是真，则输出文件中没有数据；否则，输入文件中有数据。
（4）执行上述代码，结果如图7-1所示。
图7-1 执行结果。
JSP页面跳转的几种实现方法
JSP页⾯跳转的⼏种实现⽅法使⽤href超链接标记客户端跳转使⽤客户端跳转提交表单客户端跳转使⽤response对象客户端跳转使⽤forward总做标记服务器跳转使⽤requestDispatcher类服务器跳转1、<form name="form1" method="POST" action="login02.jsp"><input type="text" name="name"><input type="text" name="psd"><input type="submit" value="提交"><input type="reset" value="重置">2、<%response.setCharacterEncoding("utf-8");response.setHeader("iso-8859-1","utf-8");request.setCharacterEncoding("utf-8");String name = request.getParameter("name");String psd = request.getParameter("psd");if(name.equals("admin")&&psd.equals("123")){%><script type="text/javascript">window.location="login03.jsp";</script><% }else{ %><script type="text/javascript">window.location="";alert(window.location.href);</script><% }%>页⾯1提交到页⾯2之后代码负责判断然后通过js代码进⾏跳转3、<%response.setCharacterEncoding("utf-8");response.setHeader("iso-8859-1","utf-8");request.setCharacterEncoding("utf-8");String name = request.getParameter("name");String psd = request.getParameter("psd");if(name.equals("admin")&&psd.equals("123")){response.sendRedirect("");//路径001return;}else{response.sendRedirect("login01.jsp");return;}%>页⾯1提交到页⾯3之后通过 response对象的sendredirect()⽅法重定向在上段代码的路径001中说明⼀点 sendredirect()中的URL是可以带参数 eg sendredirect("url?name="+name);重定向顺便传递参数 sendredirect注意的第⼆点：⼀般此句之后紧跟⼀句 return；（原因：通过sendredirect⽅法做重定向是在页⾯处理完之后才会有实际动作的，譬如上个例⼦⾥页⾯的⽤户名密码输⼊完毕点击提交然后后⼀个页⾯判断判断完即处理完页⾯3是不需要输出的也是输不出来东西的没有return再有别的输出是没有意义的⽽且有的时候芳⼉因为⽆意义的输出⽽报错）使⽤ response对象实现页⾯的跳转有2中⽅法上⾯是⼀种下⾯这种是是利⽤ setHeader()⽅法还是页⾯1提交把页⾯3的代码修改⼀下就可以了：<%response.setCharacterEncoding("utf-8");response.setHeader("iso-8859-1","utf-8");request.setCharacterEncoding("utf-8");String name = request.getParameter("name");String psd = request.getParameter("psd");if(name.equals("admin")&&psd.equals("123")){// response.sendRedirect("");// return;response.setHeader("Refresh","1;url=");}else{// response.sendRedirect("login01.jsp");// return;response.setHeader("Refresh","1;url=login01.jsp");}%>response.setHeader("Refresh","等待的秒数；url=绝对路径或者相对路径"); 路径问题sendredirect也⼀样绝对路径相对路径都没意见上例都是等待1秒之后跳转response重定向和forward跳转的区别response：1执⾏完所有的代码再跳转到⽬标页 2跳转到⽬标页后浏览器的URL会改变 3在浏览器中重定向 4可以跳转到其他服务器上的页⾯eg：百度。
js弹出窗口总结6种弹窗方法
js弹出窗口总结6种弹窗方法注：//关闭,父窗口弹出对话框，子窗口直接关闭this.Response。
Write（”<script language=javascript>window。
close（);〈/script>")；//关闭,父窗口和子窗口都不弹出对话框，直接关闭this.Response。
Write("<script>”)；this。
Response.Write("｛top。
opener =null;top。
close(）；｝”);this。
Response。
Write("</script>”）;//弹出窗口刷新当前页面width=200 height=200菜单。
菜单栏，工具条，地址栏，状态栏全没有this。
Response。
Write（”<script language=javascript>window.open（’rows。
aspx'，’newwindow'，'width=200,height=200’）</scri pt>”）;//弹出窗口刷新当前页面this。
Response.Write("〈script language=javascript〉window。
open('rows。
aspx')</script〉”）;this。
Response。
Write（”<script〉window。
open（'WebForm2.aspx’，'_blank');</script〉”);//弹出提示窗口跳到webform2。
aspx页(在一个IE窗口中)this。
Response。
Write（" <script language=javascript>alert('注册成功')； window。
软件开发测试反馈表
5．退出后再次登录时，填写的数据被清空
数据被清空
保存成功页
saveDataAgain.jsp
1．点继续填写进入设备详细配置表（2）
显示设备详细配置表（2）register
InfoAgain_1.jsp
2．点修改进入修改页面
显示修改页面
userModify.jsp
3．点退出返回登录页面
上一页填写的数据存在
5．正确填写各项后，点下一页进入设备详细配置表
显示设备详细配置表（1）register
Info_3.jsp
6．点退出返回登录页面
回到登录页面
loginPage.jsp
7．退出后再次登录时，填写的数据被清空
数据被清空
设备详细配置表
registerInfo_3.jsp
1．设备类型数量填写除数字1-10以外的任何数据，点下一页或上一页
.jsp
1．设备类型数量填写除数字1-10以外的任何数据，点下一页
弹出错误提示框
2．点下一页进入设备详细配置表填写页
进入设备详细配置表（2）register
InfoAgain_2.jsp
3．点退出返回登录
返回登录页面
loginPage.jsp
4．退出后再次登录时，填写的数据被清空
数据被清空
设备详细配置表
4．填写数据库பைடு நூலகம்存在的单位名称，点下一页
弹出提示对话框
5．正确填写各项后，点下一页进入用户调查表
进入用户调查表
registerInfo_2.jsp
6．点退出返回登录页
面
返回登录页面
loginPage.jsp
7．退出后再次登录时，填写的数据被清空
javascript弹出窗口代码大全
javascript弹出窗⼝代码⼤全如何利⽤⽹页弹出各种形式的窗⼝，我想⼤家⼤多都是知道些的，但那种多种多样的弹出式窗⼝是怎么搞出来的，今天找了⼀篇好⽂学习了： 1.弹启⼀个全屏窗⼝<html><body onload="window.open('','example01','fullscreen');">;<b></b></body></html> 2.弹启⼀个被F11化后的窗⼝<html><body onload="window.open(''','example02','channelmode');">;<b></b></body></html> 3.弹启⼀个带有收藏链接⼯具栏的窗⼝<html><body onload="window.open('','example03','width=400,height=300,directories');"><b></b></body></html> 4.⽹页对话框<html><SCRIPT LANGUAGE="javascript"><!--showModalDialog(','example04','dialogWidth:400px;dialogHeight:300px;dialogLeft:200px;dialogTop:150px;center:yes;help:yes;resizable:yes;status:yes')//--></SCRIPT><b></b></body></html><html><SCRIPT LANGUAGE="javascript"><!--showModelessDialog(','example05','dialogWidth:400px;dialogHeight:300px;dialogLeft:200px;dialogTop:150px;center:yes;help:yes;resizable:yes;status:yes')//--></SCRIPT><b></b></body></html> showModalDialog()或是showModelessDialog() 来调⽤⽹页对话框，⾄于showModalDialog()与showModelessDialog()的区别，在于showModalDialog()打开的窗⼝（简称模式窗⼝），置在⽗窗⼝上，必须关闭才能访问⽗窗⼝(建议尽量少⽤，以免招⼈反感)；showModelessDialog()dialogHeight: iHeight 设置对话框窗⼝的⾼度。
JSP Ajax Dojo框架实现提示对话框
JSP Ajax Dojo框架实现提示对话框Dojo框架为开发Web胖客户端程序提供了一套完整的Widget和一些特效操作。
Dojo提供了可以用于构建页面的一组丰富的标记。
Dojo的众多优点之一是它允许使用标准的HTML标记。
Dojo框架UI组件的特点是通过给html标签增加tag的方式进行扩展，而不是通过编写JS代码来生成。
这样，HTML开发人员就可以方便地使用Dojo框架。
现在创建一个案例，演示Dojo框架的使用和实现提示对话框。
打开记事本，将上述代码保存，名称为test.html，将该文件保存在和dojo-release-1.1.1文件夹同一个目录下。
启动Tomcat服务器，打开IE浏览器，在地址栏中输入http://localh ost:8080/DojoExample/test1.html，单击【转到】，会显示如图10-9所示窗口：图10-9 提示对话框在该文件中，代码“src=" dojo-release-1.1.1/dojo/dojo.js "”表示在当前文件中加载dojo.js文件，这样可以在当前文件中直接调用dojo.js文件中，创建的函数和对象，其中“dojo-release-1.1.1/dojo”表示路径信息。
djConfig是Dojo追加的自定义属性，在HTML标准里并没有。
使用djConfig可以做一些基本的配置，isDebug表示了当前页面中使用的dojo内容是否处在调试状态，在调试状态可以输出更多的内容，一般开发的时候我们选择true。
parseOnLoad表示所有的dijit组件是否在html 页面装载的时候自动的做展现（Render）处理，使用dijit组件的时候我们选择true，没有使用的时候使用false可以获得更好的性能。
代码“dojo.require("dijit.Dialog")”表示当前文件，需要使用的dojo类，这一步有些像Java中的import，注意添加引用的类会增加页面加载是JavaScript的下载量，所以应该尽量的精简引用的dojo对象。
创建JSP文件
创建JSP文件在前面的章节中，已经学习创建JSP文件的方法，而在本练习中通过学习JSP 基本语法之后，再了解一下创建JSP文件，并在JSP文件中输入Java脚本代码。
然后，再浏览JSP文件的内容。
（1）在MyEclipse开发工具中，右击【包资源管理器】视图中的项目名称，如Test项目，并执行【新建】|【JSP（Advanced Templates）】命令，如图3-14所示。
图3-14 创建JSP文件（2）在弹出的对话框中，将显示JSP页面的File Path、File Name和Template to use内容。
其中，File Path是指文件包含的路径；File Name为所创建JSP文件的名称；而Template to use为JSP文件所应用的模板，如图3-15所示。
单击【完成】按钮。
图3-15 设置JSP文件各内容（3）此时，将在【包资源管理器】的WebRoot目录中，创建一个MyJsp.jsp文件，并在右侧的【编辑】视图中，显示该文件内容，如图3-16所示。
在该文件中，将自动创建文档所必须的一些代码内容，如网页的头部内容，为指定页面的文档格式，以及编译语言。
图3-16 显示所创建的JSP文件（4）修改pageEncoding为“UTF-8”编码格式，如整行语句为<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>。
（5）修改<title> </title>标签之间，修改网页的标题内容为“创建的JSP文件”。
（6）在<body></body>标签之间，添加两行语句，如<p align="center"><b>恭喜测试成功</b></p><br>和<p align="center">现在时间是：<%=new Date() %></p>。
JSP 文件下载
JSP 文件下载
本扩展练习主要实现是供用户进行文件下载的功能。
练习中有两个文件showDownLoad.JSP和DownLoad.JSP文件，其中showDownLoad.JSP文件用于显示供用户下载的文件列表，DownLoad.JSP文件用于文件的下载处理。
（1）新建一个命名为showDownLoad.Jsp文件。
【新建】|【JSP （advanced Templates）】命令，弹出【新建JSP页面】对话框，在对话框的文件名称中输入showDownLoad.jsp，单击【完成】按钮。
上述代码中，首先实例化了一个File对象并通过File对象的filelist()方法获取目录的文件列表。
然后通过for循环将目录下的文件名称赋值文件域。
执行上述代码，结果如图7-11所示。
图7-11 文件下载列表
（4）新建一个命名为DownLoad.Jsp文件。
【新建】|【JSP （advanced Templates）】命令，弹出【新建JSP页面】对话框，在对话框的文件名称中输入DownLoad.jsp，单击【完成】按钮。
（5）设置文件jsp文件的编码、服务器语言和程序用到的Java类包。
（6）在DownLoad.Jsp文件中输入以下内容并保存。
当单击showFileName.jsp中的【下载】按钮时，该页面开始执行，运行成功Windows 会自动弹出下载提示窗，如图7-12所示。
图7-12 执行结果。
JSP点击输入框弹出日期选择
* @param Object theObject input元素对象
*/
this.GetoffsetTop= function(theObject) {
var absTop = 0;
var thePosition = "";
var tmpObject = theObject;
this.startMonth=1; //默认起始月份
this.endMonth=12; //默认截止月份
this.Source=theTextObject; //元素对象
this.yearSelectName="yearSelect"; //年份select元素名
this.monthSelectName="monthSelect"; //月份select元素名
this.selectedYear=tempYear;
this.selectedMonth=tempMonth
}
}
else {
if((tempYear>=this.startYear)&&(tempYear<=this.endYear)&&(tempMonth>=this.startMonth)&&(tempMonth<=this.endMonth)) {
var monthOptionStr="";
for(var i=0;i<=(endMonth-startMonth);i++) {
var disMonth=startMonth+i;
if(disMonth<10) {
JavaScript写的一个自定义弹出式对话框代码
JavaScript写的⼀个⾃定义弹出式对话框代码下图是我的设计思路下⾯是具体的js代码1，⾸先定义⼏个⾃定义函数代码复制代码代码如下://判断是否为数组function isArray(v){return v && typeof v.length == 'number' && typeof v.splice == 'function';}//创建元素function createEle(tagName){return document.createElement(tagName);}//在body中添加⼦元素function appChild(eleName){return document.body.appendChild(eleName);}//从body中移除⼦元素function remChild(eleName){return document.body.removeChild(eleName);}2，具体的窗体实现代码代码复制代码代码如下://弹出窗⼝，标题（html形式）、html、宽度、⾼度、是否为模式对话框(true,false)、按钮（关闭按钮为默认，格式为['按钮1',fun1,'按钮2',fun2]数组形式，前⾯为按钮值，后⾯为按钮onclick事件）function showWindow(title,html,width,height,modal,buttons){//避免窗体过⼩if (width < 300){width = 300;}if (height < 200){height = 200;}//声明mask的宽度和⾼度（也即整个屏幕的宽度和⾼度）var w,h;//可见区域宽度和⾼度var cw = document.body.clientWidth;var ch = document.body.clientHeight;//正⽂的宽度和⾼度var sw = document.body.scrollWidth;var sh = document.body.scrollHeight;//可见区域顶部距离body顶部和左边距离var st = document.body.scrollTop;var sl = document.body.scrollLeft;w = cw > sw ? cw:sw;h = ch > sh ? ch:sh;//避免窗体过⼤if (width > w){width = w;}if (height > h){height = h;}//如果modal为true，即模式对话框的话，就要创建⼀透明的掩膜if (modal){var mask = createEle('div');mask.style.cssText = "position:absolute;left:0;top:0px;background:#fff;filter:Alpha(Opacity=30);opacity:0.5;z-index:10000;width:" + w + "px;height:" + h + "px;";appChild(mask);}//这是主窗体var win = createEle('div');win.style.cssText = "position:absolute;left:" + (sl + cw/2 - width/2) + "px;top:" + (st + ch/2 - height/2) +"px;background:#f0f0f0;z-index:10001;width:" + width + "px;height:" + height + "px;border:solid 2px #afccfe;"; //标题栏var tBar = createEle('div');//afccfe,dce8ff,2b2f79tBar.style.cssText = "margin:0;width:" + width + "px;height:25px;background:url(top-bottom.png);cursor:move;"; //标题栏中的⽂字部分var titleCon = createEle('div');titleCon.style.cssText = "float:left;margin:3px;";titleCon.innerHTML = title;//firefox不⽀持innerText，所以这⾥⽤innerHTMLtBar.appendChild(titleCon);//标题栏中的“关闭按钮”var closeCon = createEle('div');closeCon.style.cssText = "float:right;width:20px;margin:3px;cursor:pointer;";//cursor:hand在firefox中不可⽤closeCon.innerHTML = "×";tBar.appendChild(closeCon);win.appendChild(tBar);//窗体的内容部分，CSS中的overflow使得当内容⼤⼩超过此范围时，会出现滚动条var htmlCon = createEle('div');htmlCon.style.cssText = "text-align:center;width:" + width + "px;height:" + (height - 50) + "px;overflow:auto;"; htmlCon.innerHTML = html;win.appendChild(htmlCon);//窗体底部的按钮部分var btnCon = createEle('div');btnCon.style.cssText = "width:" + width + "px;height:25px;text-height:20px;background:url(top-bottom.png);text-align:center;padding-top:3px;";//如果参数buttons为数组的话，就会创建⾃定义按钮if (isArray(buttons)){var length = buttons.length;if (length > 0){if (length % 2 == 0){for (var i = 0; i < length; i = i + 2){//按钮数组var btn = createEle('button');btn.innerHTML = buttons[i];//firefox不⽀持value属性，所以这⾥⽤innerHTML// btn.value = buttons[i];btn.onclick = buttons[i + 1];btnCon.appendChild(btn);//⽤户填充按钮之间的空⽩var nbsp = createEle('label');nbsp.innerHTML = "  ";btnCon.appendChild(nbsp);}}}}//这是默认的关闭按钮var btn = createEle('button');// btn.setAttribute("value","关闭");btn.innerHTML = '关闭';// btn.value = '关闭';btnCon.appendChild(btn);win.appendChild(btnCon);appChild(win);/*************************************以下为拖动窗体事件*********************///⿏标停留的X坐标var mouseX = 0;//⿏标停留的Y坐标var mouseY = 0;//窗体到body顶部的距离var toTop = 0;//窗体到body左边的距离var toLeft = 0;//判断窗体是否可以移动var moveable = false;//标题栏的按下⿏标事件tBar.onmousedown = function(){var eve = getEvent();moveable = true;mouseX = eve.clientX;mouseY = eve.clientY;toTop = parseInt(win.style.top);toLeft = parseInt(win.style.left);//移动⿏标事件tBar.onmousemove = function(){if(moveable){var eve = getEvent();var x = toLeft + eve.clientX - mouseX;var y = toTop + eve.clientY - mouseY;if (x > 0 && (x + width < w) && y > 0 && (y + height < h)){win.style.left = x + "px";win.style.top = y + "px";}}}//放下⿏标事件，注意这⾥是document⽽不是tBardocument.onmouseup = function(){moveable = false;}}//获取浏览器事件的⽅法，兼容ie和firefoxfunction getEvent(){return window.event || arguments.callee.caller.arguments[0];}//顶部的标题栏和底部的按钮栏中的“关闭按钮”的关闭事件btn.onclick = closeCon.onclick = function(){remChild(win);remChild(mask);}}实例调⽤复制代码代码如下:str = "看看我的窗体效果";showWindow('我的提⽰框',str,850,250,true,['地区',fun1,'矿种',fun2]);更为完整实⽤的代码，包括定义和调⽤代码复制代码代码如下:<html><head><title>⾃定义弹出对话框</title><style type ="text/css" >.layout{width:2000px;height:400px;border:solid 1px red;text-align:center;}</style><script type="text/javascript">//判断是否为数组function isArray(v){return v && typeof v.length == 'number' && typeof v.splice == 'function'; }//创建元素function createEle(tagName){return document.createElement(tagName);}//在body中添加⼦元素function appChild(eleName){return document.body.appendChild(eleName);}//从body中移除⼦元素function remChild(eleName){return document.body.removeChild(eleName);}//弹出窗⼝，标题（html形式）、html、宽度、⾼度、是否为模式对话框(true,false)、按钮（关闭按钮为默认，格式为['按钮1',fun1,'按钮2',fun2]数组形式，前⾯为按钮值，后⾯为按钮onclick事件）function showWindow(title,html,width,height,modal,buttons){//避免窗体过⼩if (width < 300){width = 300;}if (height < 200){height = 200;}//声明mask的宽度和⾼度（也即整个屏幕的宽度和⾼度）var w,h;//可见区域宽度和⾼度var cw = document.body.clientWidth;var ch = document.body.clientHeight;//正⽂的宽度和⾼度var sw = document.body.scrollWidth;var sh = document.body.scrollHeight;//可见区域顶部距离body顶部和左边距离var st = document.body.scrollTop;var sl = document.body.scrollLeft;w = cw > sw ? cw:sw;h = ch > sh ? ch:sh;//避免窗体过⼤if (width > w){width = w;}if (height > h){height = h;}//如果modal为true，即模式对话框的话，就要创建⼀透明的掩膜if (modal){var mask = createEle('div');mask.style.cssText = "position:absolute;left:0;top:0px;background:#fff;filter:Alpha(Opacity=30);opacity:0.5;z-index:100;width:" + w + "px;height:" + h + "px;";appChild(mask);}//这是主窗体var win = createEle('div');win.style.cssText = "position:absolute;left:" + (sl + cw/2 - width/2) + "px;top:" + (st + ch/2 - height/2) +"px;background:#f0f0f0;z-index:101;width:" + width + "px;height:" + height + "px;border:solid 2px #afccfe;";//标题栏var tBar = createEle('div');//afccfe,dce8ff,2b2f79tBar.style.cssText = "margin:0;width:" + width + "px;height:25px;background:url(top-bottom.png);cursor:move;"; //标题栏中的⽂字部分var titleCon = createEle('div');titleCon.style.cssText = "float:left;margin:3px;";titleCon.innerHTML = title;//firefox不⽀持innerText，所以这⾥⽤innerHTMLtBar.appendChild(titleCon);//标题栏中的“关闭按钮”var closeCon = createEle('div');closeCon.style.cssText = "float:right;width:20px;margin:3px;cursor:pointer;";//cursor:hand在firefox中不可⽤closeCon.innerHTML = "×";tBar.appendChild(closeCon);win.appendChild(tBar);//窗体的内容部分，CSS中的overflow使得当内容⼤⼩超过此范围时，会出现滚动条var htmlCon = createEle('div');htmlCon.style.cssText = "text-align:center;width:" + width + "px;height:" + (height - 50) + "px;overflow:auto;"; htmlCon.innerHTML = html;win.appendChild(htmlCon);//窗体底部的按钮部分var btnCon = createEle('div');btnCon.style.cssText = "width:" + width + "px;height:25px;text-height:20px;background:url(top-bottom.png);text-align:center;padding-top:3px;";//如果参数buttons为数组的话，就会创建⾃定义按钮if (isArray(buttons)){var length = buttons.length;if (length > 0){if (length % 2 == 0){for (var i = 0; i < length; i = i + 2){//按钮数组var btn = createEle('button');btn.innerHTML = buttons[i];//firefox不⽀持value属性，所以这⾥⽤innerHTML// btn.value = buttons[i];btn.onclick = buttons[i + 1];btnCon.appendChild(btn);//⽤户填充按钮之间的空⽩var nbsp = createEle('label');nbsp.innerHTML = "  ";btnCon.appendChild(nbsp);}}}}//这是默认的关闭按钮var btn = createEle('button');// btn.setAttribute("value","关闭");btn.innerHTML = "关闭";// btn.value = '关闭';btnCon.appendChild(btn);win.appendChild(btnCon);appChild(win);/******************************************************以下为拖动窗体事件************************************************/ //⿏标停留的X坐标var mouseX = 0;//⿏标停留的Y坐标var mouseY = 0;//窗体到body顶部的距离var toTop = 0;//窗体到body左边的距离var toLeft = 0;//判断窗体是否可以移动var moveable = false;//标题栏的按下⿏标事件tBar.onmousedown = function(){var eve = getEvent();moveable = true;mouseX = eve.clientX;mouseY = eve.clientY;toTop = parseInt(win.style.top);toLeft = parseInt(win.style.left); //移动⿏标事件 tBar.onmousemove = function() { if(moveable) { var eve = getEvent(); var x = toLeft + eve.clientX - mouseX; var y = toTop + eve.clientY - mouseY; if (x > 0 && (x + width < w) && y > 0 && (y + height < h)) { win.style.left = x + "px"; win.style.top = y + "px"; } } } //放下⿏标事件，注意这⾥是document⽽不是tBar document.onmouseup = function() { moveable = false; } }//获取浏览器事件的⽅法，兼容ie和firefoxfunction getEvent(){return window.event || arguments.callee.caller.arguments[0];}//顶部的标题栏和底部的按钮栏中的“关闭按钮”的关闭事件btn.onclick = closeCon.onclick = function(){remChild(win);if (mask){remChild(mask);}}}function addCheckbox(name,value,id,click){var str = "<input type='checkbox' name='" + name + "' value='" + value + "' id='" + id + "' onclick='" + (click == null ? '':click) + "'/> <label for='" + id + "'>" + value + "</label>";return str;}function show(){var str = "<div><div style='border:dotted 1px blue'><table cellspacing='2'>";str += "<tr><td colspan='7' style='text-align:center'>请选择所在地区：" + addCheckbox('all','全（不）选','cities_all','selectAll(this,\"cities_cb\")') + "</td></tr>";str += "<tr><td>" + addCheckbox('cities_cb','长沙市','cities_cb1') + "</td><td>" + addCheckbox('cities_cb','株洲市','cities_cb2') + "</td><td>" + addCheckbox('cities_cb','湘潭市','cities_cb3') + "</td><td>" + addCheckbox('cities_cb','衡阳市','cities_cb4') + " </td><td>" + addCheckbox('cities_cb','益阳市','cities_cb5') + "</td>";str += "<td>" + addCheckbox('cities_cb','常德市','cities_cb6') + "</td><td>" + addCheckbox('cities_cb','岳阳市','cities_cb7') + "str += "<tr><td>" + addCheckbox('cities_cb','邵阳市','cities_cb8') + "</td><td>" + addCheckbox('cities_cb','郴州市','cities_cb9') + "</td><td>" + addCheckbox('cities_cb','娄底市','cities_cb10') + "</td>";str += "<td>" + addCheckbox('cities_cb','永州市','cities_cb11') + "</td><td>" + addCheckbox('cities_cb','怀化市','cities_cb12') + "</td><td>" + addCheckbox('cities_cb','张家界市','cities_cb13') + "</td><td>" + addCheckbox('cities_cb','湘西⾃治州','cities_cb14') + "</td></tr>";str += "</table></div><br/><div style='border:dotted 1px blue'><table cellspacing='2'>";str += "<tr><td colspan='10' style='text-align:center'>请选择矿种：" + addCheckbox('all','全（不）选','class_all','selectAll(this,\"class_cb\")') + "</td></tr>";str += "<tr><td>" + addCheckbox('class_cb','铋','class_cb1') + "</td><td>" + addCheckbox('class_cb','钒','class_cb2') + "</td> <td>" + addCheckbox('class_cb','⾦','class_cb3') + "</td><td>" + addCheckbox('class_cb','煤','class_cb4') + "</td><td>" + addCheckbox('class_cb','锰','class_cb5') + "</td><td>" + addCheckbox('class_cb','钼','class_cb6') + "</td><td>" + addCheckbox('class_cb','铅','class_cb7') + "</td><td>" + addCheckbox('class_cb','⽯膏','class_cb8') + "</td><td>" + addCheckbox('class_cb','⽯煤','class_cb9') + "</td><td>" + addCheckbox('class_cb','锑','class_cb10') + "</td></tr>";str += "<tr><td>" + addCheckbox('class_cb','铁','class_cb11') + "</td><td>" + addCheckbox('class_cb','铜','class_cb12') + "</td><td>" + addCheckbox('class_cb','钨','class_cb13') + "</td><td>" + addCheckbox('class_cb','锡','class_cb14') + "</td><td>" + addCheckbox('class_cb','锌','class_cb15') + "</td><td>" + addCheckbox('class_cb','银','class_cb16') + "</td><td>" + addCheckbox('class_cb','萤⽯','class_cb17') + "</td><td>" + addCheckbox('class_cb','铀','class_cb18') + "</td><td>" + addCheckbox('class_cb','稀⼟氧化物','class_cb19') + "</td><td>" + addCheckbox('class_cb','重晶⽯','class_cb20') + "</td> </tr>";str += "<tr><td>" + addCheckbox('class_cb','硼','class_cb21') + "</td><td>" + addCheckbox('class_cb','磷','class_cb22') + "</td><td>" + addCheckbox('class_cb','⽔泥灰岩','class_cb23') + "</td><td>" + addCheckbox('class_cb','熔剂灰岩','class_cb24') + "</td><td>" + addCheckbox('class_cb','冶⾦⽩云岩','class_cb25') + "</td><td>" +addCheckbox('class_cb','岩盐','class_cb26') + "</td><td>" + addCheckbox('class_cb','芒硝','class_cb27') + "</td><td>" + addCheckbox('class_cb','钙芒硝','class_cb28') + "</td><td>" + addCheckbox('class_cb','地下⽔','class_cb29') + "</td><td>" + addCheckbox('class_cb','地下热⽔','class_cb30') + "</td></tr>";str += "</table></div></div>";showWindow('我的提⽰框',str,850,250,true,['地区',fun1,'矿种',fun2]);}function selectAll(obj,oName){var checkboxs = document.getElementsByName(oName);for(var i=0;i<checkboxs.length;i++){checkboxs[i].checked = obj.checked;}}function getStr(cbName){var cbox = document.getElementsByName(cbName);var str = "";for (var i=0;i<cbox.length;i++){if(cbox[i].checked){str += "," + cbox[i].value;}}str = str.substr(1);return str;}function fun1(){var str = getStr('cities_cb');alert('你选择的地区为：' + str);}function fun2(){var str = getStr('class_cb');alert('你选择的矿种为：' + str);}</script><body><div class ="layout"></div><div class ="layout"></div><div class ="layout"><input type="button" value="显⽰" onclick="show()" /> </div></body></html>此脚本在ie，firefox浏览器下运⾏通过。
xpopup用法
xpopup用法1. 提示框（Alert）：用于显示一条简单的提示信息，并提供确定按钮供用户关闭弹窗。
2. 确认框（Confirm）：用于提示用户是否执行一些操作，提供确定和取消按钮供用户选择。
3. 输入框（Prompt）：用于提示用户输入一些信息，可以通过正则表达式等方式对输入内容进行校验。
4. 自定义弹窗（Popup）：用于显示自定义的弹窗内容，可以包括HTML、表单、图表等任意内容。
使用xpopup主要分为以下几个步骤：1. 引入xpopup的CSS和JS文件，可以通过CDN或本地文件进行引入。
```html<link rel="stylesheet" href="xpopup.css"><script src="xpopup.js"></script>```2.创建一个或多个触发弹窗的元素，可以是按钮、链接或其他DOM元素。
```html<button id="alertBtn">点击弹出提示框</button><button id="confirmBtn">点击弹出确认框</button><button id="promptBtn">点击弹出输入框</button><button id="popupBtn">点击弹出自定义弹窗</button>```3. 使用xpopup的API方法来触发弹窗，可以根据需要设置弹窗的内容、样式、回调函数等。
```javascript//示例1：创建一个提示框$('#alertBtn').click(functiotitle: '提示',content: '这是一个提示框',callback: functioconsole.log('确定按钮被点击');}});});//示例2：创建一个确认框$('#confirmBtn').click(functiotitle: '确认',content: '是否确认执行该操作？', callback: function(result)if (result)console.log('确定按钮被点击');} elseconsole.log('取消按钮被点击');}}});});//示例3：创建一个输入框$('#promptBtn').click(functiotitle: '输入',content: '请输入姓名：',callback: function(result)if (result)console.log('输入的姓名是：', result); } elseconsole.log('取消按钮被点击');}}});});//示例4：创建一个自定义弹窗$('#popupBtn').click(functiotitle: '自定义',content: '<div style="padding: 20px;">这是一个自定义弹窗</div>',width: 400,height: 200,buttons:text: '确定',handler: functioconsole.log('确定按钮被点击');}},text: '取消',handler: functioconsole.log('取消按钮被点击');}}]});});```通过以上示例，可以看到xpopup的用法非常简单明了。
JavaScript弹出对话框的三种方式
执行上面的小例子，在页面上弹出对话框并显示一句话“上联：山石岩下古木枯”，如下所示：接着，单击“确认”按钮后再显示第二个对话框并显示“白水泉边少女妙！”，效果如下；在页面上弹出对话框并显示一句话“上联：山石岩下古木枯”，单击“确认”按钮后再显示第2个对话框并显示“白水泉边少女妙！”我们来分析一下这个小例子：a、在<script>脚本块中两次调用alert()方法；b、在每个alert()括号内分别添加了一段文本信息，运行出现如下图所示的页面，当使用鼠标单击页面上的“确定”按钮后，出现第二个页面，再点击“确定”按钮后就关闭页面上的对话框。
注意：两个对话框是分别显示的，而不是一个覆盖另一个，这是因为js实在执行完第一个alert()并等到用户点击“确认”按钮之后才去执行第二个alert()的。
alert()是js的window对象的一个方法，调用时可以写成window.alert()，也可以写成alert ()，功能都是产生一个带确认按钮的对话框，上面显示括号内的信息，第二种：confirm()方法confirm()方法与alert()方法的使用十分类似，不同点是在该种对话框上除了包含一个“确认”按钮外，还有一个“取消”按钮，这种对话框称为确认对话框，在调用window对象的confir显示效果如下：分析一下这个小例子：a、在<script>脚本块中添加confirm()方法、b、在confirm()括号内添加了一段文本信息，运行效果如上图所示，如果用户单击“确认”按钮，则confirm()方法会返回true，如果用户单击“取消”按钮，则confirm()方法会返回false，无论用户选择哪个按钮，都会关闭对话框，而继续执行javascript代码。
单击“确认”或“取消”如果单击页面的确认框上的“确定”按钮后，出现如下图所示的页面：如果单击“取消”按钮，则出现如下图所示的页面：第三种：prompt()方法alert()方法和confirm()方法的使用十分类似，都是仅仅显示已有的信息，但用户不能输入自己的信息，但是prompt()可以做到这点，她不但可以显示信息，而且还提供了一个文本框要求用户使用键盘输入自己的信息，同时她还包含“确认”或“取消”两个按钮，如果用户“确认”按钮，则prompt()方法返回用户在文本框中输入的内容（是字符串类型)或者初始值(如果用户没有输入信息);如果用户单击“取消”按钮，则prompt()方法返回null，我们称这种对话框为提示框，在这三种对话框中，她的交互性最好。
JSP 输出当前时间
在本练习中，将使用java.util包中的Date类，以获取服务器的当前系统时间，并对其进行中文处理，使其显示中文字体。
（1）创建一个命名为showDate.jsp的JSP页面。【文件】|【新建】|【JSP（advanced Templates）】命令，弹出【新建JSP页面】对话框，在对话框的文件名称中输入showDate.jsp，单击【完成】按钮，如图1-1所示。
%>
</font&g</HTML>
在上述代码中，首先声明了一个Date对象得到当前的系统时间，然后分别得到当天的小时、分钟、年份、月份、日等信息并输出。
（4）执行上述代码，结果如图1-2所示。
图1-2执行结果
int minute = today.getMinutes();//设置当天的分钟
if(hours>=0 && hours<12){//判断不天是上午还是下午
out.println("早上好!");
}else{
out.println("下午好!");
}
String[] weekdays = {"日","一","二","三","四","五","六"};//设置星期数据
<HTML>
<HEAD><TITLE>显示当前系统时间</TITLE></HEAD>
<BODY><h1>当前系统时间是</h1><hr>
<center><font color=blue >
进入网页后自动跳出的对话框代码
进入网页后自动跳出的对话框代码经常上网的朋友可能到过这样一些网站，一进入首页立刻会弹出一个窗口，或者按一个链接或按钮弹出，通常在这个窗口里会显示一些注意事项、版权信息、警告、欢迎光顾之类的话或者作者想要特别提示的信息。
其实制作这样的页面非常容易，只要往该页面的HTML 里加入几段javascript代码即可实现。
下面我就带你剖析它的奥秘。
【最基本的弹出窗口代码】其实代码非常简单：<SCRIPT LANGUAGE="javascript"><!--window.open ('page.html')--></SCRIPT>因为这是一段javascript代码，所以它们应该放在<SCRIPT LANGUAGE ="javascript">标签和</script>之间。
<!--和-->是对一些版本低的浏览器起作用，在这些老浏览器中如果不支持javascript，不会将标签中的代码作为文本显示出来。
Window.open ('page.html')用于控制弹出新的窗口page.html，如果page.html不与主窗口在同一路径下，前面应写明路径，绝对路径(http://)和相对路径(../)均可。
用单引号和双引号都可以，只是不要混用。
这一段代码可以加入HTML的任意位置，加入到<head>和</head>之间也可以，位置越靠前执行越早，尤其是页面代码较长时，又想使页面早点弹出就尽量往前放。
【经过设置后的弹出窗口】下面再说一说弹出窗口外观的设置。
只要再往上面的代码中加一点东西就可以了。
我们来定制这个弹出窗口的外观、尺寸大小、弹出位置以适应该页面的具体情况。
<SCRIPT LANGUAGE="javascript"><!--window.open('page.html','newwindow','height=100,width=400,top=0,left=0,t oolbar=no,menubar=no,scrollbars=no,resizable=no, location=no,status=no')//写成一行--></SCRIPT>参数解释：<SCRIPT LANGUAGE="javascript"> js脚本开始；window.open 弹出新窗口的命令；page.html 弹出新窗口的文件名；newwindow 弹出窗口的名字（不是文件名），可用空〃代替；height=100 窗口高度；top=0 窗口距离屏幕上方的像素值；left=0 窗口距离屏幕左侧的像素值；toolbar=no 是否显示工具栏，yes为显示；menubar,scrollbars 表示菜单栏和滚动栏；resizable=no 是否允许改变窗口大小，yes为允许；location=no 是否显示地址栏，yes为允许；status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；</SCRIPT> js脚本结束。
jsp页面实现弹窗的3方法
1.3种方法<%@LANGUAGE="JAVASCRIPT" CODEPAGE="936"%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"/><title>三种弹出对话框的用法实例</title><script language="javascript">function ale(){//这个基本没有什么说的，就是弹出一个提醒的对话框alert("我敢保证，你现在用的是演示一");}function firm(){//利用对话框返回的值（true 或者 false）if(confirm("你确信要转去天轰穿的博客？")){//如果是true ，那么就把页面转向location.href="";}else{//否则说明下了，赫赫alert("你按了取消，那就是返回false");}}function prom(){var name=prompt("请输入您的名字","");//将输入的内容赋给变量 name ，//这里需要注意的是，prompt有两个参数，前面是提示的话，后面是当对话框出来后，在对话框里的默认值if(name)//如果返回的有内容{alert("欢迎您："+ name)}}</script></head><body><p>对话框有三种</p><p>1：只是提醒，不能对脚本产生任何改变；</p><p>2：一般用于确认，返回 true 或者 false ，所以可以轻松用于 if else判断</p><p>3：一个带输入的对话框，可以返回用户填入的字符串，常见于某些留言本或者论坛输入内容那里的插入UBB格式图片</p><p>下面我们分别演示：</p><p>演示一：提醒对话框</p><p><input type="submit" name="Submit" value="提交" onclick="ale()"/></p><p>演示二：确认对话框</p><p><input type="submit" name="Submit2" value="提交" onclick="firm()"/></p><p>演示三：要求用户输入，然后给个结果</p><p><input type="submit" name="Submit3" value="提交" onclick="prom()"/></p></body></html>2.第2种1.//创建了一个由dialog的内容组成的模式对话框.2.//对话框出现之后,当前线程就完全交由出现的模式对话框进行处理.直到窗口关闭.并返回returnValue;3.var value= window.showModalDialog("dialog.htm");在dialog.htm中的代码大概如下:Js代码1.//注为了代码简单,我这里的第三个参数,是false,采用同步传输2.xmlHttp.open("POST","getData.jsp",false);3.xmlHttp.send();4.//将窗体返回值设置为响应的返回文本5.window.returnValue=xmlHttp.responseText;6.xmlHttp.close();7.//关闭窗口.会自动返回returnValue所指定的值8.window.close();这样,在前面代码中的value变量,就会得到xmlHttp.responseText值.关于window.showModalDialog()更详细的用法,楼主可以到网上搜索一下.我这里就不一一阐述了.3.自己写的<div id="dialog"></div><script type="text/javascript">setTimeout(funciton(){//5秒之后隐藏弹出框$("#dialog").hide();},5000);</script>。
Javascript弹窗代码大全(收集)
弹窗代码大全(收集)以下包括强制弹窗 24小时IP弹窗延时弹窗退弹等我们使用cookie来控制一下就可以了。
首先，将如下代码加入主页面html的<head>区：<script>function openwin(){window.open(”page.html”,”",”width=200,height=200″)}function get_cookie(name){var search = name + “=”var returnvalue = “”;if (documents.cookie.length > 0) {offset = documents.cookie.indexof(search)if (offset != -1) {offset += search.lengthend = documents.cookie.indexof(”;”, offset);if (end == -1)end = documents.cookie.length;returnvalue=”/unescape(documents.cookie.substring(offset,end))”}}return returnvalue;}function loadpopup(){if (get_cookie(’popped’)==”){openwin()documents.cookie=”popped=yes”}}</script>然后，用<body onload=”loadpopup()”>（注意不是openwin而是loadpop啊！）替换主页面中原有的<body>这一句即可。
你可以试着刷新一下这个页面或重新进入该页面，窗口再也不会弹出了。
真正的pop-only-once！写到这里弹出窗口的制作和应用技巧基本上算是完成了，俺也累坏了，一口气说了这么多，希望对正在制作网页的朋友有所帮助俺就非常欣慰了。