纯js脚本的模式对话框

简介: JS中showModalDialog 详细使用 基本介绍:           showModalDialog()         (IE 4+ 支持)           showModelessDialog()      (IE 5+ 支持)           window.showModalDialog()                  方法用来创建一个显示HTML内容的模态对话框。

JS中showModalDialog 详细使用

基本介绍:          

showModalDialog()         (IE 4+ 支持)          

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

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>          

var obj = new Object();          

obj.name="51js";          

window.showModalDialog("modal.htm",obj,"dialogWidth=200px;dialogHeight=100px");

</script> modal.htm <script>          

var obj = window.dialogArguments          

alert("您传递的参数为:" + obj.name) </script> -------------------------------

2.可以通过window.returnValue向打开对话框的窗口返回信息,当然也可以是对象。

例如: ------------------------------

parent.htm <script>          

str =window.showModalDialog("modal.htm",,"dialogWidth=200px;dialogHeight=100px");          

alert(str); </script> modal.htm <script>          

window.returnValue="http://homepage.yesky.com"; </script>

常见技巧:  

一、怎样才让在showModalDialog和showModelessDialog的超连接不弹出新窗口?   

在被打开的网页里加上<base target="_self">就可以了。这句话一般是放在<head>之间的。  

二、怎样才刷新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会弹出新窗口的。  

三、如何用javascript关掉showModalDialog(或showModelessDialog)打开的窗口。   

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

也要配合<base target="_self">,不然会打开一个新的IE窗口,然后再关掉的。  

四、Math.random与showModalDialog。     

当你设置的弹出网页固定时(如上面的"modal.htm"页面),ie很可能到临时文件区,下载上次产生的该页面

(openPage.html),而没有重新加载,     

对于动态加载的页面来说,这样往往产生误会,如没有及时更新数据,也就更不利于开发者测试。

所以,你可以采用如下方

式:       

  var strPage = “/medal.htm?random="+Math.random();      

目录
相关文章
|
4月前
|
存储 安全 JavaScript
云计算浪潮中的网络安全之舵探索Node.js中的异步编程模式
【8月更文挑战第27天】在数字化时代的风帆下,云计算如同一片广阔的海洋,承载着企业与个人的数据梦想。然而,这片海洋并非总是风平浪静。随着网络攻击的波涛汹涌,如何确保航行的安全成为了每一个船员必须面对的挑战。本文将探索云计算环境下的网络安全策略,从云服务的本质出发,深入信息安全的核心,揭示如何在云海中找到安全的灯塔。
|
3天前
Next.js 实战 (三):优雅的实现暗黑主题模式
这篇文章介绍了在Next.js中实现暗黑模式的具体步骤。首先,需要安装next-themes库。然后,在/components/ThemeProvider/index.tsx文件中新增ThemeProvider组件,并在/app/layout.tsx文件中注入该组件。如果想要加入过渡动画,可以修改代码实现主题切换时的动画效果。最后,需要在需要的位置引入ThemeModeButton组件,实现暗黑模式的切换。
|
1月前
|
JSON 移动开发 JavaScript
在浏览器执行js脚本的两种方式
【10月更文挑战第20天】本文介绍了在浏览器中执行HTTP请求的两种方式:`fetch`和`XMLHttpRequest`。`fetch`支持GET和POST请求,返回Promise对象,可以方便地处理异步操作。`XMLHttpRequest`则通过回调函数处理请求结果,适用于需要兼容旧浏览器的场景。文中还提供了具体的代码示例。
在浏览器执行js脚本的两种方式
|
24天前
|
前端开发 JavaScript UED
探索JavaScript的异步编程模式
【10月更文挑战第40天】在JavaScript的世界里,异步编程是一道不可或缺的风景线。它允许我们在等待慢速操作(如网络请求)完成时继续执行其他任务,极大地提高了程序的性能和用户体验。本文将深入浅出地探讨Promise、async/await等异步编程技术,通过生动的比喻和实际代码示例,带你领略JavaScript异步编程的魅力所在。
21 1
|
2月前
|
前端开发 JavaScript UED
探索JavaScript中的异步编程模式
【10月更文挑战第21天】在数字时代的浪潮中,JavaScript作为一门动态的、解释型的编程语言,以其卓越的灵活性和强大的功能在Web开发领域扮演着举足轻重的角色。本篇文章旨在深入探讨JavaScript中的异步编程模式,揭示其背后的原理和实践方法。通过分析回调函数、Promise对象以及async/await语法糖等关键技术点,我们将一同揭开JavaScript异步编程的神秘面纱,领略其带来的非阻塞I/O操作的魅力。让我们跟随代码的步伐,开启一场关于时间、性能与用户体验的奇妙之旅。
|
1月前
|
前端开发 JavaScript UED
探索JavaScript的异步编程模式
【10月更文挑战第33天】在JavaScript的世界里,异步编程是提升应用性能和用户体验的关键。本文将带你深入理解异步编程的核心概念,并展示如何在实际开发中运用这些知识来构建更流畅、响应更快的Web应用程序。从回调函数到Promises,再到async/await,我们将一步步解锁JavaScript异步编程的秘密,让你轻松应对各种复杂的异步场景。
|
2月前
|
JavaScript 前端开发 API
探索Node.js中的异步编程模式
【10月更文挑战第4天】在JavaScript的世界中,异步编程是提升应用性能和用户体验的关键。本文将深入探讨Node.js中异步编程的几种模式,包括回调函数、Promises、async/await,并分享如何有效利用这些模式来构建高性能的后端服务。
|
2月前
|
JavaScript 前端开发 调度
探索Node.js中的异步编程模式
在Node.js的世界里,异步编程是核心。本文将带你深入了解异步编程的精髓,通过代码示例和实际案例分析,我们将一起掌握事件循环、回调函数、Promises以及async/await等关键概念。准备好迎接挑战,让你的Node.js应用飞起来!
|
2月前
|
JavaScript 前端开发 开发者
探索Node.js中的异步编程模式
【9月更文挑战第33天】在JavaScript的后端领域,Node.js凭借其非阻塞I/O和事件驱动的特性,成为高性能应用的首选平台。本文将深入浅出地探讨Node.js中异步编程的核心概念、Promise对象、Async/Await语法以及它们如何优化后端开发的效率和性能。
28 7
|
3月前
|
JavaScript 前端开发 开发者
探索Node.js中的异步编程模式
【9月更文挑战第15天】在Node.js的世界中,“一切皆异步”不仅是一句口号,更是其设计哲学的核心。本文将带你深入理解Node.js中异步编程的几种主要模式,包括经典的回调函数、强大的Promise对象、以及简洁的async/await结构。我们将通过实例代码来展示每种模式的使用方式和优缺点,帮助你更好地掌握Node.js异步编程的精髓。无论你是Node.js新手还是有一定经验的开发者,这篇文章都能给你带来新的启示和思考。让我们一起开启Node.js异步编程的探索之旅吧!