开发过程中,经常用到蹦出一个子窗口,点击【保存】后,自动关闭子窗口,刷新父窗口。其实就是用showModalDialog()函数。以下将详细说明。
showModalDialog() (IE 4+ 支持)
showModelessDialog() (IE 5+ 支持)
window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框。
window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框。
使用方法:
vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])
vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures])
参数说明:
sURL--
必选参数,类型:字符串。用来指定对话框要显示的文档的URL。
vArguments--
可选参数,类型:变体。用来向对话框传递参数。传递的参数类型不限,包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。
sFeatures--
可选参数,类型:字符串。用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号“;”隔开。
1.dialogHeight :对话框高度,不小于100px,IE4中dialogHeight 和 dialogWidth 默认的单位是em,而IE5中是px,为方便其见,在定义modal方式的对话框时,用px做单位。
2.dialogWidth: 对话框宽度。
3.dialogLeft: 离屏幕左的距离。
4.dialogTop: 离屏幕上的距离。
5.center: {yes | no | 1 | 0 }:窗口是否居中,默认yes,但仍可以指定高度和宽度。
6.help: {yes | no | 1 | 0 }:是否显示帮助按钮,默认yes。
7.resizable: {yes | no | 1 | 0 } [IE5+]:是否可被改变大小。默认no。
8.status: {yes | no | 1 | 0 } [IE5+]:是否显示状态栏。默认为yes[ Modeless]或no[Modal]。
9.scroll:{ yes | no | 1 | 0 | on | off }:指明对话框是否显示滚动条。默认为yes。
下面几个属性是用在HTA中的,在一般的网页中一般不使用。
10.dialogHide:{ yes | no | 1 | 0 | on | off }:在打印或者打印预览时对话框是否隐藏。默认为no。
11.edge:{ sunken | raised }:指明对话框的边框样式。默认为raised。
12.unadorned:{ yes | no | 1 | 0 | on | off }:默认为no。
参数传递:
要想对话框传递参数,是通过vArguments来进行传递的。类型不限制,对于字符串类型,最大为4096个字符。也可以传递对象。
-------------------------------
例子:
共三个文件:
a.jsp 父窗口,可根据业务添加内容
showModalDialog.html 要显示的文档,不用更改
b.jsp 存放要显示数据的jsp,可以是Struts中*.do返回的页面。
a.jsp内容:
<%@ page contentType="text/html; charset=gb2312" language="java" errorPage="" %>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
</head>
<body>
<html:form action="/contentAction.do?reqCode=savepost" method="post" styleId="form1">
<table>
<tr>
<td>
<input type="button" name="button" onClick="post()" value="分配">
</td>
</tr>
</table>
</html:form>
</body>
</html>
<SCRIPT LANGUAGE="JavaScript">
function post(){
var r=window.showModalDialog('showModalDialog.html','b.jsp','dialogheight=500px;dialogwidth=600px;status=0;center=yes;scroll=no;');
location.reload();
}
</SCRIPT>
b.jsp内容:
<%@ page contentType="text/html; charset=gb2312" language="java" errorPage="" %>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>客户反馈</title>
</head>
<body>
<html:form action="/contentAction.do?reqCode=savepost" method="post" styleId="form1">
<table>
<tr>
<td>
<input type="button" name="button" onClick="savepost()" value="保存">
</td>
</tr>
</table>
</html:form>
</body>
</html>
<script language="javascript">
function savepost(){
window.close()
}
</script>
showModalDialog.html内容:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>客户信息管理</title>
</head>
<body leftmargin="0" topmargin="0">
<iframe rameborder="0" width="100%" height="100%" name="mainFrame" id="mainFrame" style="display:none"></iframe>
</body>
</html>
<script language="JavaScript" type="text/javascript">
var a=window.dialogArguments;
window.mainFrame.location=a;
document.all.mainFrame.style.display="";
</script>
分享到:
相关推荐
It’s aimed squarely at beginners who want to learn to build real iOS apps, but struggle to find a good, free course that can help them achieve their goals. If that’s you, welcome – I hope you’re ...
cannot find a good source of information to guide them through the learning process. Excel programming can be somewhat complicated, which is unavoidable for such a powerful tool, but the truth is that...
使用现在分词短语可以表达条件,如 "Using your head, you'll find a good way." 等同于 "If you use your head, you'll find a good way." 这种情况下,现在分词短语描述了一个假设的条件。 4. **方式状语或伴随...
(注:若需要下载帮助文档... The contributors attempt to find a good balance between using advanced C++ features and keeping the classes comprehensible and the code clean, consistent and easy to maintain.
- **题目:** Tony couldn't find a good excuse for being late, so he ______ one ______. - **选项:** - A. put, up - B. made, up - C. picked, up - D. dressed, up - **正确答案:** B. made, up - **知识...
To find a good job while traveling., C. To see different places described in the books.)、适应环境的方式(如A. We should be independent., B. We should be willing to change., C. We should get to know...
3. "Can you tell me where to find a good place to eat?" 表示“你能告诉我在哪里能找到吃东西的好地方吗?” 4. "Do you know where the cinema is?" 表示“你知道电影院在哪里吗?” 这个单元的练习旨在提高...
- “Itwashardforhertofindagoodjob” 修改为“It was hard for her to find a good job”,保持时态一致性。 4. **代词使用:** - “thoughshedidn'thavespecialskills” 修改为“though she didn't have ...
4. "I work very hard and I want to find a good job in the _future_." "future"指的是将来,选项A正确。 5. "Tom studies for over two hours every evening, so he has no time to watch TV." "over"在这里表示...
to find a good doctor)或是获得免费医疗(C. to get free medical treatment)。 12. **健康状况**:第12题,来自新泽西的女士现在的情况,可能是病情恶化(A. She is getting worse.),需要进一步治疗(B. She...
3. 完成句子:这部分练习了学生将中文句子准确翻译成英文的能力,例如:"希望找到一份好工作"(hoping to find a good job)、"安稳地睡在床上"(sleep soundly in bed)、"一瞬间"(in a flash)、"踏步和摩擦声"...
can use to find a good configuration for the query optimizer. Chapter 10, “Execution Plans,” describes in detail how to obtain, interpret, and judge the efficiency of execution plans.
- "My friend, after graduation, didn't find a good job and always wanted to run a bar." 这句话运用了介词短语"after graduation"来表示时间。 - "His permit was finally approved." 使用了被动语态,"was ...
15. "It is easy to find a good hotel in our city we have many of them here." "because"引导原因状语从句,解释为什么在我们的城市很容易找到好的酒店。 16. "You won't feel happy at school you get on well ...
例如:"Where can I find a good restaurant?" 表示寻找一家好的餐厅。 3. **词语辨析**:在句子 "I think that the best time to visit Hannan Island is in November because the weather is excellent then." 中...
14. From his lesson, we drew a conclusion that it is not so difficult to learn English if we find a good way.(将"what"改为"that",形成同位语从句) 15. We shared the belief that if you're fortunate ...
"He will find a good method to solve it." 意味着他会找到一个好办法来解决难题。这强调了在英语中,解决问题的策略或手段可以用 "method" 来表示。 2. **开始新生活/放弃**:第二题中的 "take up farming" 表示...
例如:"It is very encouraging for me to find a good job." 这句话意味着找到一份好工作对我而言是非常鼓舞人心的。 应用这两个词,我们可以完成以下练习: 1. 上周日她没有被允许开车。——She wasn’t allowed...
to do`(提醒某人做某事)、`find a good way to do`(找到做某事的好方法)、`instead of doing`(代替/反而做某事)、`be weak in doing`(在做某事方面很差)以及`make sb. do`(让某人做某事),这些都是英语...