JS 模态对话框和非模态对话框操作技巧汇总


Posted in Javascript onApril 15, 2013

模态窗口 javascript 技巧汇总(传值、打开、刷新)
1、要弹出的页面中,一定要保证<head></head>标签间有<base target=“_self”>,否则会弹出的模态窗口上,点击按钮时,会再次弹出一个新页面。
2、被弹出页面的按钮的事件处理中,应该有Response.Write(new Function().ClosePage());语句,用以关闭当前的模态窗口。
3、因为幽默的缓存原因,如果你在模态窗口中修改了数据,你会发现,父页面上的数据刷新了,但是当你再点击按钮,重新弹出模态窗口时,你会发现模态窗口中的内容还是上次的内容,经过我试验,手动改了html代码后,点击弹出的模态窗口还是弹出相同的页面,所以,这里要绕开这个机制,方法是在被弹出的aspx页面后加上随机参数。上面模态窗口代码可以改成如下,以避免此问题:

public string ModalWindow(string openAspxPage,int width,int height) 
{ 
string js = string.Format("javascript:window.showModalDialog(\"{0}&rand="+new Random().Next().ToString()+ "\",window,\"status:false;dialogWidth:{1}px;dialogHeight:{2}px\")",openAspxPage,width,height); 
return js; 
}

注意红字部分参数,是自定义的一个参数,此参数应该是整个项目中唯一的变更名称,并且无意义(最保险的办法是把这个变更命名为lakjsdflawdfqwoifa之类的名称)。
基本上,满足了上述条件,做页面时就操作模态窗口,相对就简单了。
//-------------------------------------------------------------------------------------------------------------
模态窗口——有时会让你觉得很好用的一个东西
关于showModalDialog和showModelessDialog的使用,一个b/s结构的项目中用window.open弹出的窗口被一些广告拦截工具给拦截了,没办法就只能用showModalDialog来解决问题,但showModalDialog这个方法不好的就是页面间传值太麻烦(传值有两种方法),可是实在没其他的办法来解决这个拦截问题,只有用这个了。代码到是两下就写好了,但调试代码的时候发现一个问题,用showModalDialog弹出的窗口中的内容一直是第一次访问页面时显示的内容,开始就怀疑是窗体调用的页面缓存,最后通过单步跟踪调试也证明了问题确实是读取的页面缓存,这说明了在asp.net中用showModalDialog和showModelessDialog做弹出窗体时最好在page_load事件加上
Response.Expires = 0; 
Response.Cache.SetNoStore(); 
Response.AppendHeader("Pragma", "no-cache");

来清除缓存。用asp,php,js,vbscript测试使用showModalDialog方法没有出现需要清除缓存的情况,大家可以放心使用,关于showModalDialog的时候可以参见下面我找到的详细介绍
showModalDialog和showModelessDialog使用心得
一、showModalDialog和showModelessDialog有什么不同?

showModalDialog:被打开后就会始终保持输入焦点。除非对话框被关闭,否则用户无法切换到主窗口。类似alert的运行效果。

showModelessDialog:被打开后,用户可以随机切换输入焦点。对主窗口没有任何影响(最多是被挡住一下而以。:P)
二、怎样才让在showModalDialog和showModelessDialog的超连接不弹出新窗口?

在被打开的网页里加上<base target="_self">就可以了。这句话一般是放在<html>和<body>之间的。
三、怎样才刷新showModalDialog和showModelessDialog里的内容?

在showModalDialog和showModelessDialog里是不能按F5刷新的,又不能弹出菜单。这个只能依靠javascript了,以下是相关代码:
<body onkeydown="if (event.keyCode==116){reload.click()}">
<a id="reload" href="filename.htm" style="display:none">reload...</a>

将filename.htm替换成网页的名字然后将它放到你打开的网页里,按F5就可以刷新了,注意,这个要配合<base target="_self">使用,不然你按下F5会弹出新窗口的。
注意:如果想当访问的时候自动刷新,可以在被打开得页面,设置一个记录变量,当被打开模态窗口得时候,变量至1,然后使用上述方法刷新模态窗口,当关闭窗口得时候,变量至0.
四、如何用javascript关掉showModalDialog(或showModelessDialog)打开的窗口。

<input type="button" value="关闭" onclick="window.close()">

也要配合<base target="_self">,不然会打开一个新的IE窗口,然后再关掉的。
五、showModalDialog和showModelessDialog数据传递技巧。

例子:

现在需要在一个showModalDialog(或showModelessDialog)里读取或设置一个变量var_name

一般的传递方式:

window.showModalDialog("filename.htm",var_name)

//传递var_name变量

在showModalDialog(或showModelessDialog)读取和设置时:

alert(window.dialogArguments)//读取var_name变量

window.dialogArguments="oyiboy"//设置var_name变量

这种方式是可以满足的,但是当你想在操作var_name同时再操作第二个变理var_id时呢?就无法再进行操作了。这就是这种传递方式的局限性。


以下是我建议使用的传递方式:

window.showModalDialog("filename.htm",window)

//不管要操作什么变量,只直传递主窗口的window对象

在showModalDialog(或showModelessDialog)读取和设置时:

alert(window.dialogArguments.var_name)//读取var_name变量

window.dialogArguments.var_name="oyiboy"//设置var_name变量

同时我也可以操作var_id变量

alert(window.dialogArguments.var_id)//读取var_id变量

window.dialogArguments.var_id="001"//设置var_id变量

同样还可以对主窗口的任何对象进行操作,如form对象里的元素。

window.dialogArguments.form1.index1.value="这是在设置index1元素的值"
在弹出窗口中返回值:window.returnValue = ... ;
六、多个showModelessDialog的相互操作。

以下代码的主要作用是在一个showModelessDialog里移动别一个showModelessDialog的位置。

主文件的部份js代码。

var s1=showModelessDialog('控制.htm',window,"dialogTop:1px;dialogLeft:1px") //打开控制窗口

var s2=showModelessDialog('about:blank',window,"dialogTop:200px;dialogLeft:300px")

//打开被控制窗口

控制.htm的部份代码。

<script> 


//操作位置数据,因为窗口的位置数据是"xxxpx"方式的,所以需要这样的一个特殊操作函数。 
function countNumber(A_strNumber,A_strWhatdo) 
{ 
A_strNumber=A_strNumber.replace('px','') 
A_strNumber-=0 
switch(A_strWhatdo) 
{ 
case "-":A_strNumber-=10;break; 
case "+":A_strNumber+=10;break; 
} 
return A_strNumber + "px" 
} 

</script> 

<input type="button" onclick="window.dialogArguments.s2.dialogTop=countNumber(window.dialogArguments.s2.dialogTop,'-')" value="上移"> 

<input type="button" onclick="window.dialogArguments.s2.dialogLeft=countNumber(window.dialogArguments.s2.dialogLeft,'-')" value="左移"> 

<input type="button" onclick="window.dialogArguments.s2.dialogLeft=countNumber(window.dialogArguments.s2.dialogLeft,'+')" value="右移"> 

<input type="button" onclick="window.dialogArguments.s2.dialogTop=countNumber(window.dialogArguments.s2.dialogTop,'+')" value="下移">

以上关键部份是:

窗口命名方式:var s1=showModelessDialog('控制.htm',window,"dialogTop:1px;dialogLeft:1px")

变量访问方式:window.dialogArguments.s2.dialogTop

这个例子只是现实showModelessDialog与showModelessDialog之间的位置操作功能,通过这个原理,在showModelessDialog之间相互控制各自的显示页面,传递变量和数据等。这要看各位的发挥了。
====================================================================
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。

Javascript 相关文章推荐
js 创建书签小工具之理论
Feb 25 Javascript
jQuery中创建实例与原型继承揭秘
Dec 21 Javascript
侧栏跟随滚动的简单实现代码
Mar 18 Javascript
JavaScript定义类和对象的方法
Nov 26 Javascript
js实现仿微博滚动显示信息的效果
Dec 21 Javascript
jquery判断input值不为空的方法
Jun 05 Javascript
基于JS实现的随机数字抽签实例
Dec 08 Javascript
jquery实现下拉框左右选择功能
Feb 21 Javascript
JavaScript插入排序算法原理与实现方法示例
Aug 06 Javascript
从0到1搭建Element的后台框架的方法步骤
Apr 10 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
Apr 24 Javascript
vue实现树形结构样式和功能的实例代码
Oct 15 Javascript
jquery获得页面元素的坐标值实现思路及代码
Apr 15 #Javascript
Extjs优化(二)Form表单提交通用实现
Apr 15 #Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
Apr 15 #Javascript
Extjs优化(一)删除冗余代码提高运行速度
Apr 15 #Javascript
Extjs Gird 支持中文拼音排序实现代码
Apr 15 #Javascript
jquery+css+ul模拟列表菜单具体实现思路
Apr 15 #Javascript
js作用域及作用域链概念理解及使用
Apr 15 #Javascript
You might like
php压缩多个CSS为一个css的代码并缓存
2011/04/21 PHP
excel操作之Add Data to a Spreadsheet Cell
2007/06/12 Javascript
js对象关系图 方便dom操作
2012/03/18 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
2014/11/12 Javascript
使用js获取图片原始尺寸
2014/12/03 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
2015/02/06 Javascript
详解JavaScript中数组的相关知识
2015/07/29 Javascript
使用jQuery或者原生js实现鼠标滚动加载页面新数据
2016/03/06 Javascript
使用D3.js制作图表详解
2017/08/13 Javascript
jQuery实现注册会员时密码强度提示信息功能示例
2017/09/05 jQuery
JavaScript通过mouseover()实现图片变大效果的示例
2017/12/20 Javascript
Vue瀑布流插件的使用示例
2018/09/19 Javascript
python通过urllib2爬网页上种子下载示例
2014/02/24 Python
利用Anaconda简单安装scrapy框架的方法
2018/06/13 Python
使用Python AIML搭建聊天机器人的方法示例
2018/07/09 Python
解决Pycharm界面的子窗口不见了的问题
2019/01/17 Python
浅谈Python中的可迭代对象、迭代器、For循环工作机制、生成器
2019/03/11 Python
Python3+PyInstall+Sciter解决报错缺少dll、html等文件问题
2019/07/15 Python
Python csv模块使用方法代码实例
2019/08/29 Python
python爬虫 猫眼电影和电影天堂数据csv和mysql存储过程解析
2019/09/05 Python
Python安装依赖(包)模块方法详解
2020/02/14 Python
如何使用 Python 读取文件和照片的创建日期
2020/09/05 Python
Python如何获取文件路径/目录
2020/09/22 Python
欧尚俄罗斯网上超市:Auchan俄罗斯
2018/05/03 全球购物
有趣的睡衣和礼物:LazyOne
2019/11/27 全球购物
Carmen Sol官网:购买果冻鞋、手袋和配件
2021/01/01 全球购物
成龙洗发水广告词
2014/03/14 职场文书
小学数学课题方案
2014/06/15 职场文书
保密工作整改报告
2014/11/06 职场文书
公司借条范本
2015/05/25 职场文书
反四风问题学习心得体会
2016/01/22 职场文书
《小小的船》教学反思
2016/02/18 职场文书
2016年秋季趣味运动会开幕词
2016/03/04 职场文书
大学社团活动总结怎么写
2019/06/21 职场文书
如何利用JavaScript实现二叉搜索树
2021/04/02 Javascript
浅析JavaScript中的变量提升
2022/06/01 Javascript