JS 模态对话框和非模态对话框操作技巧汇总
模态窗口 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。
相关推荐
-
js实现div模拟模态对话框展现URL内容
本文实例讲述了js实现div模拟模态对话框展现URL内容.分享给大家供大家参考,具体如下: <script> function sAlert(str){ var msgw,msgh,bordercolor; msgw=800;//提示窗口的宽度 msgh=600;//提示窗口的高度 titleheight=25 //提示窗口标题高度 bordercolor="#336699";//提示窗口的边框颜色 titlecolor="#99CCFF";//提示窗口
-
JavaScript 实现模态对话框 源代码大全
首先,来说一下对话框: 对话框在Windows应用程序中使用非常普遍,许多应用程序的设定,与用户交互需要通过对话框来进行,因此对话框是Windows应用程序中最重要的界面元素之一,是与用户交互的重要手段.对话框是一个特殊的窗口,任何对窗口进行的操作(如移动.最大化.最小化等)也可以在对话框实施. 对话框大致可以分为以下两种: (1)模态对话框:模态对话框弹出后,独占了系统资源,用户只有在关闭该对话框后才可以继续执行,不能够在关闭对话框之前执行应用程序其他部分的代码.模态对话框一般要求用户做出某种
-
JS对话框_JS模态对话框showModalDialog用法总结
父窗口: 复制代码 代码如下: <html><head><title>无标题页</title><script language="javascript" type="text/javascript">function opendialog1() { var someValue=window.showModalDialog("b.html","","dialo
-
ModelDialog JavaScript模态对话框类代码
/** * JavaScript ModelDialog v0.1 * * new ModelDialog({ * caption 标题 '对话框标题'(默认) * template 主体内容 ''(默认) * dialogCls 对话框className 'md-dialog'(默认) * headCls 头部className 'md-head'(默认) * btnCloseCls 关闭按钮className 'md-close'(默认) * bodyCls 主体className 'md-
-
利用javascript打开模态对话框(示例代码)
1. 标准的方法 复制代码 代码如下: <script type="text/javascript"> function openWin(src, width, height, showScroll){ window.showModalDialog (src,"","location:No;status:No;help:No;dialogWidth:"+width+";dialogHeight:"+heig
-
详解AngularJS 模态对话框
在涉及GUI程序开发的过程中,常常有模态对话框以及非模态对话框的概念 模态对话框:在子界面活动期间,父窗口是无法进行消息响应.独占用户输入 非模态对话框:各窗口之间不影响 主要区别:非模态对话框与APP共用消息循环,不会独占用户. 模态对话框独占用户输入,其他界面无法响应 本文内容 Angular JS 实现模式对话框.基于 AngularJS v1.5.3 和 Bootstrap v3.3.6. 项目结构 图 1 项目结构 运行结果 图 1 运行结果:大模态 index.html <!DOCT
-
两种WEB下的模态对话框 （asp.net或js的分别实现）
在这里我给大家介绍或者说是展示一下我自己的做的两种模态对话框方法一 本方法是采用ASP.NET AJAX的扩展控件:ASP.NET AJAX Control Tool Kit中的ModalPopupExtender控件实现的: 第一步,我们先创建一个ASP.NET页面:ModalPopup.aspx 页面代码: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Aja
-
javascript showModalDialog模态对话框使用说明
1. 标准的方法 复制代码 代码如下: <script type="text/javascript"> function openWin(src, width, height, showScroll){ window.showModalDialog (src,"","location:No;status:No;help:No;dialogWidth:"+width+";dialogHeight:"+height+&
-
js 模式窗口(模式对话框和非模式对话框)的使用介绍
Javascript里面分模式对话框和非模式对话框,其实两者区别就是在对话框被关闭之前用户能否在同一页面的其他地方进行工作.比如"打开文件"对话框便是典型的模式对话框,在你对这个对话框做出动作才能对打开该对话框的程序进行其他操作,而非模式对话框则不必. 模式对话框:showModalDialog 非模式对话框:showModelessDialog vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures]
-
JS 模态对话框和非模态对话框操作技巧汇总
模态窗口 javascript 技巧汇总(传值.打开.刷新) 1.要弹出的页面中,一定要保证<head></head>标签间有<base target="_self">,否则会弹出的模态窗口上,点击按钮时,会再次弹出一个新页面. 2.被弹出页面的按钮的事件处理中,应该有Response.Write(new Function().ClosePage());语句,用以关闭当前的模态窗口. 3.因为幽默的缓存原因,如果你在模态窗口中修改了数据,你会发现,父
-
MFC创建模态对话框和非模态对话框的方法
在MFC中对话框有两种形式,一个是模态对话框(model dialog box),一个是非模态对话框(modeless dialog box).本文对此分别简述其创建方法. 一.模态对话框(model dialog box) 在程序运行的过程中,若出现了模态对话框,那么主窗口将无法发送消息,直到模态对话框退出才可以发送. 点击模态对话框中的OK按钮,模态对话框会被销毁. 创建一个模态对话框的代码如下所示: //创建一个模态对话框 CTestDialog td; td.DoModal(); 其中C
-
JavaScript数组常用操作技巧汇总
本文实例汇总了JavaScript数组的常用操作技巧.分享给大家供大家参考.具体如下: 前言 相信大家都用惯了jquery或者underscore等这些类库中常用的数组相关的操作,如$.isArray,_.some,_.find等等方法.这里无非是对原生js的数组操作多了一些包装. 这里主要汇总一下JavaScript数组操作的常用API.相信对大家解决程序问题很有帮助. 一.性质 JavaScript中的数组是一种特殊的对象,用来表示偏移量的索引是该对象的属性,索引可能是整数.然而,这些数字索
-
Qt专栏之模态与非模态对话框的实现
一.概念介绍 什么是模态对话框和非模态对话框呢?我们日常使用软件过程中很常见的现象,点击某个软件上某个按钮会弹出对话框窗口,此时对于其他窗口而言: 可以同时对其他窗口进行操作的称为非模态: 不可以同时,只能操作当前弹出的窗口的称为模态. 二.代码示例 2.1模态对话框示例代码 /*在主类对象的构造函数中我们新建一个按钮用于弹出对话框*/ QPushButton *btn = new QPushButton("new",this); /*信号与槽的连接 槽函数通过Lambda表达式实现
-
VC MFC非模态对话框的实现方法
众所周知的,MFC中非模态对话框在显示后,程序其他窗口仍能正常运行,可以响应用户输入,还可以相互切换.本文就来给大家讲解一下非模态对话框的实现方法: 一.非模态对话框的对话框资源和对话框类 实际上,模态对话框和非模态对话框在创建对话框资源和生成对话框类上是没有区别的,因此,在创建模态对话框时所创建的IDD_TIP_DIALOG对话框资源和CTipDlg类都不需要修改. 二.创建及显示非模态对话框的步骤 需要修改的是,对话框类实例的创建和显示,也就是之前在CAdditionDlg::OnBnCli
-
js打开word文档预览操作示例【不是下载】
本文实例讲述了js打开word文档预览操作.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function openmydoc(path) { var doc = new ActiveXObject("
-
PHP入门教程之日期与时间操作技巧总结(格式化,验证,获取,转换,计算等)
本文实例讲述了PHP日期与时间操作技巧.分享给大家供大家参考,具体如下: Demo1.php <?php //验证时间 //checkdate() 1.月份 2.日 3.年 //checkdate() 判断这个日期是否是合法的日期 //不合法的日期,试一试 if(checkdate(7,16,2010)){ echo '这个日期是合法有效的'; }else{ echo '这个日期是非法的.'; } ?> Demo2.php <?php //date -- 格式化一个本地时间/日期 //d
-
PHP目录与文件操作技巧总结(创建,删除,遍历,读写,修改等)
本文实例总结了PHP目录与文件操作技巧.分享给大家供大家参考,具体如下: Demo1.php <?php //将一个路径赋给一个变量 //它目前来说,只是一个字符串,字符串表示的是一个目录的路径 //文件名包含,文件的名称 + 文件的扩展名(就是.后面的文件类型) //文件的扩展名说白了就是文件后缀 $path = 'C:\AppServ\www\Basic6\Demo1.php'; // echo basename($path); // echo '<br/>'; // //dirna
-
PHP数据对象PDO操作技巧小结
本文实例讲述了PHP数据对象PDO操作技巧.分享给大家供大家参考,具体如下: PHP 数据对象 (PDO) 扩展为PHP访问数据库定义了一个轻量级的一致接口. <?php try { $dsn = "mysql:host=localhost; port=3306; dbname=wsq_hotel; charset=utf-8"; $user = 'root'; $psw ='root'; $pdo = new PDO($dsn,$user,$psw); $sql = 'sele