JS 模态对话框和非模态对话框操作技能汇总_根基知识_脚本之家

2019-12-22 20:24栏目:竞技宝竞猜
TAG:

首先,来说一下对话框: 对话框在Windows应用程序中使用非常普遍,许多应用程序的设定,与用户交互需要通过对话框来进行,因此对话框是Windows应用程序中最重要的界面元素之一,是与用户交互的重要手段。对话框是一个特殊的窗口,任何对窗口进行的操作也可以在对话框实施。 对话框大致可以分为以下两种: 模态对话框:模态对话框弹出后,独占了系统资源,用户只有在关闭该对话框后才可以继续执行,不能够在关闭对话框之前执行应用程序其他部分的代码。模态对话框一般要求用户做出某种选择。 非模态对话框:非模态对话框弹出后,程序可以在不关闭该对话框的情况下继续执行,在转入到应用程序其他部分的代码时可以不需要用户做出响应。非模态对话框一般用来显示信息,或者实时地进行一些设置。 模态窗口在传统编程语言中很常见,简单的说就是,如果是模态的,就是打开一个子窗口,如果这个子窗口不关闭,就不能操作它的父窗口,原来程序暂停执行,直到这个模态窗口关闭后才回到原来程序继续。 非模态的就是直接显示出来,然后原来的程序继续执行下面的语句,而且其他窗口也呈可用状态。 模态对话框独占了用户的输入,当一个模态对话框打开时,用户只能与该对话框进行交互,而其他用户界面对象收不到输入信息。应用程序用到的大部分对话框都是模态对话框。 通常浏览器中windwo.open或超链接弹出的新窗口就是非模式窗口,而模式窗口是类似alert那种必须关闭才能响应其他事件的窗口。 明白了对话框的模态和非模态,来看下边在B/s结构应用程序的开发中,有时我们会希望使用者按下按钮后开启一个保持在原窗口前方的子窗口, 在IE中,我们可以使用window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框。window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框,由于是对话框,因此它并没有一般用window.open()打开的窗口的所有属性。 这里是window.showModalDialog弹出窗口的一个实例函数: 复制代码 代码如下:

from:http://fp-moon.iteye.com/blog/1426956
JavaScript模态窗口和非模态窗口

模态窗口 javascript 技巧汇总 1、要弹出的页面中,一定要保证

例:复制代码 代码如下:点击 需要注意的是FireFox浏览器中不支持showmodaldialog() ,这是因为在最初MozillaSuite 中,是支持 showmodaldialog()的,不过后来发现 showmodaldialog() 存在安全隐患,不久后就取消了对showmodaldialog() 的支持,这个事情还发生在 bug 194404 提交前。在想出更好的解决方案前,相信 Firefox 是不会提供对 showmodaldialog() 的支持的。 打开弹窗只能使用window.open实现这样的功能,window.open的语法如下 : oNewWindow = window.open( [sURL] [, sName] [, sFeatures] [, bReplace]) 只是,在Firefox下,window.open的参数中,sFeature多了一些功能设定,要让FireFox下开启的窗口跟IE的showModalDialog一样的话, 只要在sFeatures中加个modal=yes就可以了,也许可能是出于安全考虑modal=yes,打开的并不是模式窗口,范例如下: 复制代码 代码如下:oNewWindow = window.open( [sURL] [, sName] [, sFeatures] [, bReplace]) 由于在firefox没有showModalDialog方法。则用如下判断来兼容两种浏览器: 复制代码 代码如下:

JavaScript中弹出的窗口有模态窗口和非模态窗口。模态窗口就是打开一个子窗口,如果这个子窗口不关闭,就不能操作它的父窗口,原来程序暂停执行,直到这个模态窗口关闭

标签间有,否则会弹出的模态窗口上,点击按钮时,会再次弹出一个新页面。 2、被弹出页面的按钮的事件处理中,应该有Response.Write.ClosePage;语句,用以关闭当前的模态窗口。 3、因为幽默的缓存原因,如果你在模态窗口中修改了数据,你会发现,父页面上的数据刷新了,但是当你再点击按钮,重新弹出模态窗口时,你会发现模态窗口中的内容还是上次的内容,经过我试验,手动改了html代码后,点击弹出的模态窗口还是弹出相同的页面,所以,这里要绕开这个机制,方法是在被弹出的aspx页面后加上随机参数。上面模态窗口代码可以改成如下,以避免此问题: 复制代码 代码如下: public string ModalWindow(string openAspxPage,int width,int height) { string js = string.Format("javascript:window.showModalDialog("{0}&rand="+new Random+ "",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; 来清除缓存。用asp,php,js,vbscript测试使用showModalDialog方法没有出现需要清除缓存的情况,大家可以放心使用,关于showModalDialog的时候可以参见下面我找到的详细介绍 showModalDialog和showModelessDialog使用心得 一、showModalDialog和showModelessDialog有什么不同? showModalDialog:被打开后就会始终保持输入焦点。除非对话框被关闭,否则用户无法切换到主窗口。类似alert的运行效果。 showModelessDialog:被打开后,用户可以随机切换输入焦点。对主窗口没有任何影响 二、怎样才让在showModalDialog和showModelessDialog的超连接不弹出新窗口? 在被打开的网页里加上就可以了。这句话一般是放在和之间的。 三、怎样才刷新showModalDialog和showModelessDialog里的内容? 在showModalDialog和showModelessDialog里是不能按F5刷新的,又不能弹出菜单。这个只能依靠javascript了,以下是相关代码: reload... 将 注意:如果想当访问的时候自动刷新,可以在被打开得页面,设置一个记录变量,当被打开模态窗口得时候,变量至1,然后使用上述方法刷新模态窗口,当关闭窗口得时候,变量至0. 四、如何用javascript关掉showModalDialog打开的窗口。 也要配合,不然会打开一个新的IE窗口,然后再关掉的。 五、showModalDialog和showModelessDialog数据传递技巧。 例子: 现在需要在一个showModalDialog里读取或设置一个变量var_name 一般的传递方式: window.showModalDialog(") //传递var_name变量 在showModalDialog读取和设置时: alert(window.dialogArguments)//读取var_name变量 window.dialogArguments="oyiboy"//设置var_name变量 这种方式是可以满足的,但是当你想在操作var_name同时再操作第二个变理var_id时呢?就无法再进行操作了。这就是这种传递方式的局限性。 以下是我建议使用的传递方式: window.showModalDialog(") //不管要操作什么变量,只直传递主窗口的window对象 在showModalDialog读取和设置时: 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_//设置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的部份代码。 复制代码 代码如下:

二、JavaScript+div实现模态对话框: 一个类似163邮箱对话框的功能。主要是2个层来完成这个效果,第一就是用来锁住下面整个页面的层,要有透明的效果,可以用filter:alpha。还有一个层是用来显示对话框内容的,所以zIndex参数一定要设置的比锁频层高。 对话框的CSS可以自己定义一下,要注意的是,CSS中body一定要定义margin:0,否则锁频时,会出现空隙,而产生锁频不完整的问题,还有一个就是Select这个控件的问题,因为在IE里,他的zIndex很高,所以锁频层盖不住他,这里可以用两种办法,一种是把他隐藏掉,一种可以把他的disabled属性设置为false,第二种方法只能禁止编辑它,但是还是会在锁频层上当,效果不佳,还是隐藏掉比较好。 复制代码 代码如下:

后才回到原来程序继续。非模态的就是直接显示出来,然后原来的程序继续执行下面的语句,而且其他窗口也呈可用状态。 模态窗口独占了用户的输入,当一个模态窗口打开时,

以上关键部份是: 窗口命名方式:var s1=showModelessDialog('控制.htm',window,"dialogTop:1px;dialogLeft:1px") 变量访问方式:window.dialogArguments.s2.dialogTop

`````

用户只能与该窗口进行交互,而其他用户界面对象收不到输入信息。 通常浏览器中windwo.open或超链接弹出的新窗口就是非模式窗口,而模式窗口是类似alert那种必须关闭才能

这个例子只是现实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。

12222 11 22

响应其他事件的窗口。

三、Javascript模态对话框 取父页的值 1. a.htm 父页 有 window.showModalDialog; 有 Html元素 2.b.htm 弹出页面 能否在 b.htm 上取到 a.htm 中 t1值 ? 回答: 在a.html中设置 var results = window.showModalDialog{alert;} 在b.html中

常见的方法
window.showModalDialog(“http://www.javachen.com”,”newwin”,”dialogHeight: 200px; dialogWidth: 150px; dialogTop: 458px; dialogLeft: 166px; edge: Raised;

四、模态对话框模仿MessageBox 复制代码 代码如下:

center: Yes; help: Yes; resizable: Yes; status: Yes;”);

模态对话框

window.showModelessDialog() //用来创建一个显示HTML内容的非模态对话框。
window.returnValue=”javachen”; //设置模态窗口返回值
var str=window.showModalDialog(“http://www.javachen.com”); //获得模态窗口返回值
window.close(); //关闭窗口
window.focus(); //窗口聚焦


使用方法:
参数说明: sURL–必选参数,类型:字符串。用来指定对话框要显示的文档的URL。 vArguments–可选参数,类型:变体。用来向对话框传递参数。传递的参数类型不限,包括数

组等。对话框通过window.dialogArguments来取得传递进来的参数。

五、showModalDialog 打开的模态对话框有不少经典的缺陷,解决办法

sFeatures–可选参数,类型:字符串。用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号“;”隔开。

showModalDialog 打开的模态对话框有不少经典的缺陷,在这里不再冗述,我只谈谈最近碰到的几个问题以及解决办法。问题1. showModalDialog 打开一个 aspx 页面时,如果该页面在之前已经打开过一次,则自动会加载缓存中的页面,而不能显示最新数据。解决的办法有两种:. 在打开模态框时,给 url 后面多加一个随机参数,来避免页面被缓存:

1.dialogHeight :对话框高度,不小于100px,IE4中dialogHeight 和 dialogWidth 默认的单位是em,而IE5中是px,为方便其见,在定义modal方式的对话框时,用px做单位。

varurl='EditFlowNode.aspx?flowId=0&id=2&x='+Math.random();varresult=window.showModalDialog(url,'','status:no;help:no;');

2.dialogWidth: 对话框宽度。

. 在该 asp.net 页面的 Page_Load 方法里设定不缓存:

3.dialogLeft: 离屏幕左的距离。

protectedvoidPage_Load(objectsender,EventArgse){Response.Expires=0;Response.Cache.SetNoStore();Response.AppendHeader;}

4.dialogTop: 离屏幕上的距离。

问题2. 模态对话框中的内容和脚本加载次序不同,导致的问题。缘起:考虑如下页面的代码

5.center: {yes | no | 1 | 0 }:窗口是否居中,默认yes,但仍可以指定高度和宽度。

-//W3C//DTDXHTML1.0Transitional//EN"";

6.help: {yes | no | 1 | 0 }:是否显示帮助按钮,默认yes。

newdocument

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。

function showTDYT()
{
//打开模态子窗体,并获取返回值
var result=showModalDialog('土地储备-用途.htm','这里随便命名','dialogWidth:320px;dialogHeight:530px;center:yes;help:no;resizable:no;status:no');

$("#txtYongTu").val(result);
}

子页面的方法和返回值:

function tc() //参数分别为id,name和password
{

var getCC=$("#cc").text(); //获取想要的值
window.returnValue= getCC; //返回 结果

window.close(); //firefox不支持window.close()
}

使用窗口时的常见问题:   vReturnValue = window.showModalDialog(sURL[, vArguments][, sFeatures]); //模态

vReturnValue = window.showModelessDialog(sURL[, vArguments][, sFeatures]); //非模态

window.open(pageURL,name,parameters)  //非模态 (pageURL 为子窗口路径 ; name 为子窗口句柄 parameters ; 为窗口参数(各参数用逗号分隔) )

非模态时使用open()方法比较好(因为各浏览器都基本对它兼容)

1、使用脚本关闭窗口时防止出现确认框

在做网页的时候,有时候在完成某个功能的时候需要关闭当前窗口,但现在的新版的浏览器中在使用脚本 window.close() 方法来关闭窗口时,总是会出现一个确认框,这带来非

常不好的体验。
可以防止出现确认框:
window.opener = null;
window.open("", "_self");
window.close();

版权声明:本文由龙竞技官网发布于竞技宝竞猜,转载请注明出处:JS 模态对话框和非模态对话框操作技能汇总_根基知识_脚本之家