`
vefan
  • 浏览: 85578 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

关于javascript的模态、非模态窗口,主流浏览器的支持

阅读更多
先简单介绍一下基本知识:
一、window.open()支持环境: JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+

二、基本语法:
window.open(pageURL,name,parameters)
其中:
pageURL 为子窗口路径
name 为子窗口句柄
parameters 为窗口参数(各参数用逗号分隔 , 属性和值之间用等于号"="连接)

三、各项参数
其中yes/no也可使用1/0;pixel value为具体的数值,单位象素。

参数 | 取值范围 | 说明
alwaysLowered | yes/no | 指定窗口隐藏在所有窗口之后
alwaysRaised | yes/no | 指定窗口悬浮在所有窗口之上
depended | yes/no | 是否和父窗口同时关闭
directories | yes/no | Nav2和3的目录栏是否可见
height | pixel value | 窗口高度
hotkeys | yes/no | 在没菜单栏的窗口中设安全退出热键
innerHeight | pixel value | 窗口中文档的像素高度
innerWidth | pixel value | 窗口中文档的像素宽度
location | yes/no | 位置栏是否可见
menubar | yes/no | 菜单栏是否可见
outerHeight | pixel value | 设定窗口(包括装饰边框)的像素高度
outerWidth | pixel value | 设定窗口(包括装饰边框)的像素宽度
resizable | yes/no | 窗口大小是否可调整
screenX | pixel value | 窗口距屏幕左边界的像素长度
screenY | pixel value | 窗口距屏幕上边界的像素长度
scrollbars | yes/no | 窗口是否可有滚动栏
titlebar | yes/no | 窗口题目栏是否可见
toolbar | yes/no | 窗口工具栏是否可见
Width | pixel value | 窗口的像素宽度
z-look | yes/no | 窗口被激活后是否浮在其它窗口之上

window.showModalDialog使用手册


基本介绍:
showModalDialog() (IE 4+ 支持, FireFox3.0支持)
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。

参数传递:
1.要想对话框传递参数,是通过vArguments来进行传递的。类型不限制,对于字符串类型,最大为4096个字符。也可以传递对象,例如:
-------------------------------
parent.htm
<script type="text/javascript">
var obj = new Object();
obj.name="51js";
window.showModalDialog("modal.htm",obj,"dialogWidth=200px;dialogHeight=100px");
</script>
modal.htm
<script type="text/javascript">
var obj = window.dialogArguments
alert("您传递的参数为:" + obj.name)
</script>
-------------------------------
2.可以通过window.returnValue向打开对话框的窗口返回信息,当然也可以是对象。例如:
------------------------------
parent.htm
<script type="text/javascript">
str =window.showModalDialog("modal.htm",,"dialogWidth=200px;dialogHeight=100px");
alert(str);
</script>
modal.htm
<script type="text/javascript">
window.returnValue="http://www.51js.com";
</script>

在IE中,我们可以使用showModalDialog来传值。
语法如下:
vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])

但是.在Firefox中却沒有showModalDialog方法,不过我们可以用window.open()
语法如下:
oNewWindow = window.open( [sURL] [, sName] [, sFeatures] [, bReplace])

只是,在Firefox下,window.open的参数中,sFeature多了一些功能设定,而在FireFox下要让开启的视窗跟IE的showModalDialog一样的话,只要在sFeatures中加個modal=yes就可以了。

下面用一个示例来说明其用法。
功能说明:从子窗口中输入颜色种类提交到父窗口,并添加选项到下拉列表。
a.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>a.html文档</title> 
<script language="javascript"> 
function openstr() 
{ 
ReturnValue=window.showModalDialog("b.html",window,"dialogWidth=510px;dialogHeight=150px;status=no"); 
if(ReturnValue && ReturnValue!="") 
{ 
oOption = document.createElement('OPTION'); 
oOption.text=ReturnValue; 
oOption.value=ReturnValue; 
document.all.txtselect.add(oOption); 
} 
}
</script> 
</head> 
<body> 
<form id="form1" name="form1" method="post" action=""> 
<label> 
<select name="txtselect" id="txtselect"> 
</select> 
</label> 
<label> 
<input type="button" name="Submit" value="打开子窗口" onclick="openstr()" /> 
</label> 
</form> 
</body> 
</html> 

b.html
<html > 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>b.html文档</title> 
<script language="javascript"> 
function ClickOk() 
{ 
var t=document.Edit; 
var url=t.color.value; 
if(url==null||url=="填写颜色") return(false); 

window.returnValue=url; 
window.close(); 
} 
</script> 
</head> 
<body> 
<table border="0" cellpadding="0" cellspacing="2" align="center" width="300"> 
<form name="Edit" id="Edit"> 
<tr> 
<td width="30" align="right" height="30">color:</td> 
<td height="30"><input type="text" name="color" value="填写颜色" /></td> 
<td width="56" align="center" height="30"><input " type="button" name="bntOk" value="确认" onclick="ClickOk();" /> </td> 
</tr> 
</form> 
</table> 
</body> 
</html>

修改为兼容IE和FireFoxr的代码如下:
<!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>a.html文档</title> 
<script type="text/javascript"> 
function openstr() 
{ 
window.open("b.html","","modal=yes,width=500,height=500,resizable=no,scrollbars=no"); 
}

</script> 
</head> 

<body> 
<form id="form1" name="form1" method="post" action=""> 
<label> 
<select name="txtselect" id="txtselect"> 
</select> 
</label> 
<label> 
<input type="button" name="Submit" value="打开子窗口" onclick="openstr()" /> 
</label> 
</form> 
</body> 
</html> 

b.html
<html > 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>b.html文档</title> 
<script type="text/javascript"> 
function ClickOk() 
{ 
var t=document.Edit; 
var color=t.color.value; 
if(color==null||color=="填写颜色") return(false); 
var oOption = window.opener.document.createElement('OPTION'); 
oOption.text=url; 
oOption.value=url; 
//检查浏览器类型
var bname = navigator.appName;
if (bname.search(/netscape/i) == 0)
{
window.opener.document.getElementById("txtselect").appendChild(oOption); 
}
else if (bname.search(/microsoft/i) == 0)
{
window.opener.document.all.txtselect.add(oOption); 
}
else
{
}
window.close(); 
} 
</script> 
</head> 
<body> 
<table border="0" cellpadding="0" cellspacing="2" align="center" width="300"> 
<form name="Edit" id="Edit"> 
<tr> 
<td width="30" align="right" height="30">color:</td> 
<td height="30"><input type="text" name="color" value="填写颜色" /></td> 
<td width="56" align="center" height="30"><input " type="button" name="bntOk" value="确认" onclick="ClickOk();" /> </td> 
</tr> 
</form> 
</table> 
</body> 
</html>
分享到:
评论

相关推荐

    模态窗口解决方案

    本文将深入探讨模态窗口的基本概念、实现方法以及如何确保其在谷歌浏览器及其他主流浏览器中的兼容性。 #### 一、模态窗口概述 模态窗口是一种用户必须与之交互才能继续操作的界面元素。它通常覆盖在当前页面上,...

    javascript 弹出层兼容主流浏览器 非常漂亮

    在这个主题中,“javascript 弹出层兼容主流浏览器 非常漂亮”指的是创建了一个既美观又能在各种主流浏览器中正常工作的弹出层解决方案。下面我们将详细讨论相关的知识点。 首先,我们需要关注的是浏览器兼容性。在...

    超漂亮的仿腾讯弹出层效果(兼容主流浏览器)

    在IT行业中,弹出层(或称为对话框、模态窗口)是一种常见的用户界面元素,用于在不离开当前页面的情况下显示额外的信息或者进行交互操作。本项目“超漂亮的仿腾讯弹出层效果(兼容主流浏览器)”正是这样一个实现,...

    jQuery模态窗口用户注册代码.zip

    - 兼容性:确保代码在主流浏览器上都能正常工作。 - 响应式设计:使界面在不同设备和屏幕尺寸上都能良好展示。 - 错误处理:清晰地向用户显示输入错误,并提供修复建议。 - 安全性:对敏感信息如密码进行加密处理,...

    5款自定义登录表单样式,用户体验良好,外观优美,兼容主流浏览器

    4. 模态窗口:有时,登录表单会以弹出框或模态窗口的形式出现,这种方式不会打断用户的浏览流程,同时保持页面的整体一致性。 5. 人性化元素:例如,记住我选项、忘记密码链接、以及注册新账户的便捷入口,都是人性...

    超漂亮的仿腾讯弹出层效果(兼容主流浏览器).zip

    这种弹出层在网页中常见于提示信息、登录窗口、模态对话框等场景,能够增强用户的交互体验。 首先,我们来谈谈“CSS3”。CSS3是层叠样式表的第三版,是Web开发领域的一个重要里程碑。它引入了许多新特性,如选择器...

    20种炫酷打开模态窗口动画特效插件xdialog

    xdialog是一款专门用于实现这种效果的JavaScript插件,它为模态窗口的展示提供了丰富的动画特效,提升用户体验。 **xdialog特性** 1. **动画效果**:xdialog的核心亮点在于其包含的20种不同的打开动画效果。这些...

    这是一款在用户阅读文章后弹出的jQuery可定制的订阅注册模态窗口插件

    6. **测试与调试**:对插件进行多浏览器兼容性测试,确保在主流浏览器上的正常运行,并使用开发者工具进行调试,找出并修复潜在问题。 总的来说,这款jQuery订阅注册模态窗口插件结合了前端开发的多个技术点,包括...

    模态窗体(artDialog4.1.7)

    在JavaScript和CSS库的助力下,创建模态窗口变得更加便捷。本文将深入探讨“artDialog4.1.7”这一组件,它是一款轻量级、高效的模态对话框解决方案。 **artDialog** 是一个非常小巧的Web对话框组件,压缩后的大小仅...

    javascript+cta.js插件实现的轻量级Modal模态框效果源码.zip

    7. **浏览器兼容性**:考虑到实际应用中需要兼容各种浏览器,这个模态框插件应当经过优化,以确保在主流浏览器(如Chrome、Firefox、Safari、Edge等)上正常工作。 8. **响应式设计**:现代网页设计强调响应式布局...

    非常炫的js弹出窗口

    7. 跨浏览器兼容性:由于不同的浏览器可能对某些JavaScript特性支持不同,编写弹出窗口时需考虑兼容性问题,如使用polyfill库或条件语句来确保代码在所有主流浏览器上都能正常运行。 8. 用户体验优化:为了提供良好...

    jBox(Div模式窗口兼容各种浏览器)

    1. **跨浏览器兼容性**:jBox的设计目标就是消除不同浏览器之间的差异,确保在所有主流浏览器(如Chrome、Firefox、Safari、IE等)上都能正常工作,避免了`window.showModalDialog()`在特定环境下的限制。...

    ie+FF通用的父子模态对话框相互传值

    在IE和Firefox这两个主流浏览器上实现父子模态对话框之间的值传递,需要对JavaScript有深入的理解,并且考虑到跨浏览器兼容性。以下将详细解释这一技术点。 首先,让我们理解什么是父子模态对话框。父对话框通常是...

    通用ModelWindow函数

    在兼容性方面,这个通用ModelWindow函数特别考虑了旧版浏览器,如Internet Explorer 6和7,以及Firefox等其他主流浏览器。这在当今浏览器环境不断更新迭代的情况下显得尤为重要,因为很多开发者已经不再支持这些老...

    跨浏览器仿模式窗体

    同时,进行广泛的浏览器兼容性测试,包括主流的Chrome、Firefox、Safari、Edge以及旧版本的浏览器,确保在各种环境下都能稳定运行。 总的来说,"跨浏览器仿模式窗体"涉及到HTML结构设计、CSS样式定制、JavaScript...

    jquery弹出窗口效果 比较全 兼容所有浏览器

    "兼容所有浏览器"是一项关键特性,确保了这些弹出窗口效果能够在主流的浏览器(如Chrome、Firefox、Safari、Edge以及旧版本的Internet Explorer)中正常工作。这对于那些需要广泛用户覆盖的网站来说至关重要。实现...

    纯JS炫酷下拉列表框美化插件pickout源码.zip

    该下拉列表框插件大小仅5kb,在用户点击了列表框时,会弹出类似模态窗口的下拉列表,还可以对列表中的选项进行搜索过滤。本代码适用浏览器:搜狗、360、FireFox、Chrome、Safari、Opera、傲游、世界之窗,不支持IE8...

    如何用html5 和css3创建兼容就浏览器的作品集

    创建一个兼容多种浏览器...通过语义化的标签、条件注释、JavaScript库和兼容性技术,作品集将能够在主流浏览器中展示出相同的高质量效果,无论是最新版的Chrome、Firefox、Safari,还是已经逐渐被淘汰的旧版IE浏览器。

Global site tag (gtag.js) - Google Analytics