`
txf2004
  • 浏览: 7028472 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

showModalDialog以及IE7 对话框样式

阅读更多

window.showModalDialog(URL,dialogArgments.features) 打开一个新窗口

URL为要开启的网页名字。
dialogArgments为设定好传递给新视窗网页的参数,可以为任意数据类型。
feature 与open()的类似,都是格式方面的设定。调用格式为featureName1:featureValue1:(分号)featureName2:featureValue2:

关于feature具体的参数我就不详细写了,看名字就应该知道什么用处了吧。
certer , dialogHeight, dialogLeft,dialogTop,dialogWidth,help(是否显示help按钮,下同),status,resizeable
值=1为yes,0为no.

我认为最重要的是dialogArgments,可以传递值到新的窗口。
第二重要就是 它的返回值 window.returnValue.可以在showModalDialog开启的窗口关闭后前,回传一个任意类型的值。
使用示例:

<scriptlanguage="javascript">...
functionshow()...{
varsRet=window.showModalDialog('a.html','title','scrollbars=no;resizable=no;help=no;status=no;dialogTop=25;dialogLeft=0;dialogHeight=350px;dialogwidth=410px;');
if(sRet=="refresh")
...{
window.location.reload();
}


}

</script>
<inputname=""type="button"onClick="show();"value="打开"/>

<scriptlanguage="javascript">...
functional()...{
alert(
"关闭了哦");
window.returnValue
="refresh";
window.close();
}

</script>
<inputname=""type="button"onClick="al();"value="关闭"/>

下面对IE7中使用该函数的不同进行一下解释。顺便要注意的是,IE7对标签的验证是非常严格的,以前随便写的<base target="_self"/>必须放在

<title>标题</title>
<basetarget="_self"/>

下面,否则就不会有效。切记切记!好了,下面对窗口的大小问题进行以下解释吧。

1、模态窗口自适应:
在Internet Explorer中定义window.open 和 window.showModalDialog以打开一个网页对话框的时候,在不同版本的Windows和不同版本的IE中,窗口的大小和样式都是不同的。
在IE7中更是有了很大的不同,状态栏,主要内容被默认保留(下详),还加了一个只读状态的地址栏.窗口的最小尺寸被限定在了250*150:


如上图所示:在ie7中,定义的高度仅仅是窗体内容高度,状态栏及地址栏的高度都不算在内的;而ie6则包含了状态栏及地址栏的高度。所以,我们需要依据不同的操作系统及ie版本,高度自适应的js代码如下:

<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> -->/**
*模态窗口高度调整.
*根据操作系统及ie不同版本,重新设置窗口高度,避免滚动条出现.
*/
functionresetDialogHeight(){
if(window.dialogArguments==null){
return;//忽略非模态窗口
}

varua=navigator.userAgent;
varheight=document.body.offsetHeight;
if(ua.lastIndexOf("MSIE6.0")!=-1){
if(ua.lastIndexOf("WindowsNT5.1")!=-1){
//alert("xp.ie6.0");
varheight=document.body.offsetHeight;
window.dialogHeight
=(height+102)+"px";
}
elseif(ua.lastIndexOf("WindowsNT5.0")!=-1){
//alert("w2k.ie6.0");
varheight=document.body.offsetHeight;
window.dialogHeight
=(height+49)+"px";
}
}
}

模态窗口页面加上如下代码:
<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> -->//窗口加载后,判断系统及其ie版本调整高度
window.onload=resetDialogHeight;


2、ie7中模态窗口提交时新开窗口问题:
IE 7.0对模态窗口<base target='_self'>属性的放置位置更加严格。<base>标签必须放置在<head>标签对中,否则提交表单时总是会新开窗口。示例如下 :
<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> --><html>
<head>
<title>标题</title>
<basetarget="_self"/>
......
</head>
<bodyonload="pageClose();"scroll="no">
......
</body>
</html>

分享到:
评论

相关推荐

    针对window.showmodaldialog弹出窗体无刷新的详细使用

    由于`showModalDialog`加载的是一个新页面,所以可以通过CSS来控制对话框的样式,包括背景、边框、内边距等。 5. **关闭对话框** 在对话框内部,可以使用`window.close()`来关闭模态对话框,并返回一个值。 6. *...

    showModalDialog技术文章

    1. **API语法**:讲解`showModalDialog`的基本用法,包括它的参数,如对话框的URL、初始参数和对话框样式选项。 2. **返回值**:讨论`showModalDialog`函数的返回值,它通常包含用户在对话框中输入的信息或对话框的...

    showModalDialog

    1. 兼容性问题:`showModalDialog`在现代浏览器中的支持情况不一,尤其是IE之外的浏览器,可能需要额外的处理来确保跨浏览器兼容。 2. 用户体验:由于其非标准性质,一些浏览器可能会有默认的样式和行为差异,导致...

    showModalDialog参数传递和获

    由于`showModalDialog`不支持最新的Web标准,存在许多问题,如不兼容性(主要在IE浏览器中使用)、无法进行CSS3和JavaScript增强以及阻塞主线程等。因此,现代Web开发通常使用更灵活的替代方案,如`&lt;dialog&gt;`元素、...

    window.showModalDialog的基本用法

    - **edge**: {sunken|raised},设置对话框边框样式,默认为 raised。 - **unadorned**: {yes|no|1|0|on|off},默认为 no,表示是否去除对话框的标准装饰。 #### 传递参数 当需要从主窗口向打开的对话框传递参数时,...

    javascript showModalDialog模态对话框使用说明

    其中src是对话框要加载的URL地址,arguments是传给对话框的参数,featureString则是一系列控制对话框样式的属性字符串。 举例来说,使用以下代码可以打开一个宽度为500px、高度为400px,且不带滚动条的模态对话框:...

    JS对话框_JS模态对话框showModalDialog用法总结

    需要注意的是,showModalDialog方法虽然在IE浏览器中被广泛支持,但在非IE浏览器中并不是一个标准的Web API,因此在使用时需要注意浏览器的兼容性问题。由于HTML5标准的兴起,推荐使用更为现代和兼容的方法,如使用...

    Chrome中模态对话框showModalDialog返回值问题的解决方法

    在Web开发中,`showModalDialog`是一个古老的API,用于在浏览器中打开一个模态对话框,用户必须与该对话框交互才能继续操作主页面。然而,`showModalDialog`在不同浏览器中的实现存在差异,特别是在Chrome中,返回值...

    showModalDialog及dialogArguments使用

    7. **resizable**: 是否允许调整对话框大小,默认为`no`(仅IE5及以上版本支持)。 8. **status**: 是否显示状态栏,默认为`yes`(模式对话框为`no`)。 9. **scroll**: 是否显示滚动条,默认为`yes`。 10. **dialog...

    页面弹窗实现用的showModalDialog方法

    通过以上介绍和示例,我们可以看到 `showModalDialog` 和 `showModelessDialog` 方法提供了丰富的功能来创建定制化的对话框,虽然它们主要限于IE浏览器,但对于理解弹窗机制和跨窗口通信仍有借鉴意义。

    Window.ShowModalDialog使用手册

    11. **edge**: 对话框边缘样式(sunken/raised,默认为raised)。 12. **unadorned**: 是否不显示装饰边框(yes/no/1/0/on/off,默认为no)。 **示例代码:** ```javascript // parent.htm var obj = new Object();...

    JS中showModalDialog 详细使用.txt

    7. **`resizable:`** `{yes|no|1|0}` [IE5+] 控制对话框是否可调整大小,默认为 `no`。 8. **`status:`** `{yes|no|1|0}` [IE5+] 控制是否显示状态栏,默认为 `yes`(对于非模态对话框)或 `no`(对于模态对话框)。...

    showModalDialog(VS2008)示例

    总的来说,这个示例项目旨在教育开发者如何在 IE 上利用 `showModalDialog` 功能创建一个与数据库交互的模态对话框,并结合了 Visual Studio 2008 的开发环境和 ASP.NET Web Forms 技术。虽然 `showModalDialog` 在...

    学习从实践开始之jQuery插件开发 对话框插件开发

    - 能够自定义对话框的大小、标题、图标以及是否显示关闭按钮。 - 底部按钮可自定义数量,并为其设置回调函数。 ### 知识点三:实现方法 - 使用CSS来控制插件的外观,需要定义一个专属的名字空间以避免样式冲突。 ...

    js 模式窗口(模式对话框和非模式对话框)的使用介绍

    在Web开发中,模式对话框和非模式对话框是两种常见的交互方式,用于临时获取用户输入或显示...使用时,开发者可以根据实际需求选择合适的对话框类型,并通过传递参数以及设置对话框的样式属性,来满足特定的交互需求。

    window.showModalDialog()返回值的学习心得总结

    需要注意的是,`showModalDialog()` 和 `showModelessDialog()` 主要是IE浏览器的特性,对于其他浏览器(如Firefox、Chrome)支持并不一致,因此在现代Web开发中,更倾向于使用HTML5的`&lt;dialog&gt;`元素或者第三方库...

    JS中showModalDialog 的使用解析

    JavaScript中的`showModalDialog`和`showModelessDialog`是两种用于打开对话框的方法,它们在Web应用程序中常用于提供用户交互。这两种方法都属于浏览器的`window`对象,允许开发者展示HTML内容,并与用户进行交互。...

    ie firefox 兼容问题大全

    - **问题描述**:在IE中,可以通过`showModalDialog`或`showModelessDialog`打开模态对话框;而Firefox不支持这两种方法。 - **解决方案**:可以使用`window.open`方法来模拟模态对话框的功能。如果需要在子窗口...

    IE和FF兼容问题

    - 支持IE5.5、IE6、IE7、IE8等多个版本。 - 可在同一界面内切换不同的IE版本,方便快捷。 - 支持最新的网页技术标准,如HTML5、CSS3等。 - 提供丰富的调试工具,如查看源代码、审查元素等功能。 - **使用步骤**...

    window.showModalDialog使用手册

    - **edge**:{ sunken | raised },对话框边框样式,默认为raised。 - **unadorned**:{ yes | no | 1 | 0 | on | off },默认为no,可能用于HTA中的特定场景。 **参数传递:** 1. **vArguments** 传递参数的...

Global site tag (gtag.js) - Google Analytics