`
jeasony
  • 浏览: 199957 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

showModalDialog/showModelessDialog使用例子

    博客分类：
  • js
CacheJavaScriptHTMLASP.netASP 
阅读更多

(一)showModalDialog使用例子,父窗口向子窗口传递值,子窗口设置父窗口的值,子窗口关闭的时候返回值到父窗口.

farther.html
---------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language="javascript">
<!--
function openChild(){

var k = window.showModalDialog("child.html",window,"dialogWidth:335px;status:no;dialogHeight:300px");
if(k != null)
document.getElementById("txt11").value = k;
}
//-->
</script>
</HEAD>

<BODY>
<br>传递到父窗口的值:<input id="txt9" type="text" value="3333333333333"><br>
返回的值:<input id="txt11" type="text"><br>
子窗口设置的值:<input id="txt10" type="text"><br>


<input type ="button" value="openChild" onclick="openChild()">
</BODY>
</HTML>
---------------------------------------------------------------
child.html
--------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<meta http-equiv="Expires" CONTENT="0">
<meta http-equiv="Cache-Control" CONTENT="no-cache">
<meta http-equiv="Pragma" CONTENT="no-cache">

</HEAD>

<BODY>
<br>父窗口传递来的值:<input id="txt0" type="text"><br>
输入要设置父窗口的值:<input id="txt1" type="text"><input type ="button" value="设置父窗口的值" onclick="setFather()"><br>
输入返回的值:<input id="txt2" type="text"><input type ="button" value="关闭切返回值" onclick="retrunValue()">
<input type ="button" value="关闭刷新父窗口" onclick="">

</BODY>
</HTML>

<script language=javascript>
<!--
var k=window.dialogArguments;
//获得父窗口传递来的值
if(k!=null)
 {
 document.getElementById("txt0").value = k.document.getElementById("txt9").value;
 }
 //设置父窗口的值
function setFather()
{
 k.document.getElementById("txt10").value = document.getElementById("txt1").value
}
//设置返回到父窗口的值
function retrunValue()
{
var s = document.getElementById("txt2").value;
window.returnValue=s;
window.close();
}
//-->
</script>

----------------------------
说明:
由于showModalDialog缓存严重,下面是在子窗口取消客户端缓存的设置.也可以在服务器端取消缓存,参考:
http://adandelion.cnblogs.com/articles/252137.html
<meta http-equiv="Expires" CONTENT="0">
<meta http-equiv="Cache-Control" CONTENT="no-cache">
<meta http-equiv="Pragma" CONTENT="no-cache">
------------------------------------------------------------------------------------------------------------------------
(二)下面是关闭刷新父窗口的例子

farther.html
---------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language="javascript">
<!--
function openChild()
{

 var k = window.showModalDialog("child.html",window,"dialogWidth:335px;status:no;dialogHeight:300px");
 if(k == 1)//判断是否刷新
 {
  alert('刷新');
  window.location.reload();
 }
}
//-->
</script>
</HEAD>

<BODY>
<br>传递到父窗口的值:<input id="txt9" type="text" value="3333333333333"><br>
<input type ="button" value="openChild" onclick="openChild()">
</BODY>
</HTML>
----------------------------------------------------
child.html
--------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<meta http-equiv="Expires" CONTENT="0">
<meta http-equiv="Cache-Control" CONTENT="no-cache">
<meta http-equiv="Pragma" CONTENT="no-cache">

</HEAD>

<BODY>
<br>父窗口传递来的值:<input id="txt0" type="text"><br>

<input type ="button" value="关闭刷新父窗口" onclick="winClose(1)">
<input type ="button" value="关闭不刷新父窗口" onclick="winClose(0)">

</BODY>
</HTML>

<script language=javascript>
<!--
var k=window.dialogArguments;
//获得父窗口传递来的值
if(k!=null)
 {
 document.getElementById("txt0").value = k.document.getElementById("txt9").value;
 }

 

//关闭窗口返回是否刷新的参数.
function winClose(isRefrash)
{

window.returnValue=isRefrash;
window.close();
}
//-->
</script>

--------------------------
说明
1.下面是取消客户端缓存的:
<meta http-equiv="Expires" CONTENT="0">
<meta http-equiv="Cache-Control" CONTENT="no-cache">
<meta http-equiv="Pragma" CONTENT="no-cache">
也可以在服务器端取消缓存,参考:
http://adandelion.cnblogs.com/articles/252137.html

2.向父窗口传递阐述在ASP.NET中也可以是用aaa.aspx?id=1的方式传递.

3.不刷新父窗口的话在父窗口中直接这样一来设置可以.
<script>
window.showModalDialog("child.html",window,"dialogWidth:335px;status:no;dialogHeight:300px");
</script>
4.在子窗口中若要提交页面的话要加入:,这样就不会打开新窗口了.
<head>
<base target="_self">
</HEAD>

本文参考了:http://dev.csdn.net/develop/article/15/15113.shtm ,里面有showModalDialog/showModelessDialog的详细使用说明

分享到：
| showModalDialog和showModelessDialog
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    showModalDialog和showModelessDialog使用心得

    ### showModalDialog和showModelessDialog使用心得：深入解析与实践 在Web开发中，`showModalDialog` 和 `showModelessDialog` 是两种用于创建弹出窗口的方法，它们各自具有独特的特性和应用场景。本文将详细解析这...

    WEB页子窗口(showModalDialog和showModelessDialog)使用说明

    以下是一个简单的例子，展示了如何使用`showModalDialog`和`showModelessDialog`： - `f.html`是主窗口，包含一个按钮，点击按钮会调用`openDialogBox`函数打开子窗口`c.html`。 - `c.html`是对话框窗口，有一个...

    js弹出框全集（带全部页面例子）

    个人学习js弹出框的一些例子，含有alert,prompt,confirm, showModalDialog,showModelessDialog,很全也很简单，包学包会，例子全部都有，并且简单明了！

    JS中showModalDialog 的使用解析

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

    javascript网页对话框.pdf

    需要注意的是，`showModalDialog`和`showModelessDialog`在现代浏览器中的支持情况可能不一致，特别是跨浏览器兼容性问题，开发者应谨慎使用并考虑使用其他替代技术，如Bootstrap模态框或自定义实现。 总的来说，...

    一个使用模式窗口的例子

    模式窗口主要通过`window.showModalDialog()`或`window.showModelessDialog()`方法来创建。这些方法允许开发者指定弹出窗口的URL、参数以及显示特性等，从而实现高度定制化的用户体验。 #### 三、`window....

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

    非模式对话框的创建使用showModelessDialog函数，用法与showModalDialog类似： ```javascript window.showModelessDialog('filename.htm', window, 'dialogWidth=200px;dialogHeight=100px'); ``` 在创建非模式...

    模态窗口demo及说明

    ### 模态窗口demo及说明 ...尽管`window.showModalDialog()`和`window.showModelessDialog()`提供了方便的功能，但由于它们是非标准方法，在实际项目中应考虑使用更广泛的解决方案来确保良好的跨浏览器兼容性。

    弹出网页窗口设计全攻略

    以上就是网页弹出窗口设计的一些基本技巧和方法，包括`window.open()`、`showModalDialog()`、`showModelessDialog()`以及HTA的应用。熟练掌握这些技术，可以极大地提升网页的交互性和用户体验。在实际应用中，...

    js的window.showModalDialog及window.open用法实例分析

    `window.showModelessDialog`与`showModalDialog`类似，只是它创建的是非模态对话框，用户可以在对话框打开的同时继续与主窗口交互，这个方法在IE 5+中被引入。 总结来说，`window.open`适合创建非阻塞的新窗口，而...

    网页弹出窗口代码汇总

    本文档汇总了几种常用的网页弹出窗口的实现方法，包括通过`window.open`方法创建新窗口、使用`showModalDialog`和`showModelessDialog`方法创建模态和非模态对话框，以及通过HTA技术创建富客户端应用。 #### 一、...

    JS弹出窗口的各种传值方法.pdf

    在JavaScript中，弹出窗口通常指的是使用`window.open()`、`window.showModalDialog()`或`window.showModelessDialog()`等方法创建的新窗口。这些方法在Web应用中常用于实现一些交互性的功能，如用户确认、数据输入...

    JavaScript王者归来part.1 总数2

    　11.3.2.2 showModalDialog和showModelessDialog--非W3C或ECMAScrip标准　 　11.3.3 状态栏　 　11.4 框架--上层的Window对象　 　11.4.1 多框架应用　 　11.4.2 框架之间的关系　 　11.4.3 框架的命名　 　11.4.4 ...

    jsp,js中遇到的函数和方法

    - `showModalDialog()` 和 `showModelessDialog()`：这两种方法都是JavaScript中的对话框函数，用来打开新的窗口。`showModalDialog()`是模态对话框，阻塞用户与页面其余部分的交互，直到对话框关闭。`...

    Web弹出窗口对话框.pdf

    在文档中，使用了showModalDialog函数来创建模态对话框： ```javascript showModalDialog('dcontent1.htm'); ``` 或者带上参数以传递值给对话框： ```javascript showModalDialog('dcontent2.htm', ip1.value, '...

    ajax实现弹出窗口代码大全

    以下是一些使用`window.open()`方法实现的不同类型弹出窗口的例子： 1. **全屏弹出窗口** ```html ('http://www.kunde58.com','example01','fullscreen');"&gt; ``` 这段代码将在页面加载时打开一个全屏的弹出...

    dialogArguments

    `dialogArguments`属性主要用于传递参数给由`window.showModalDialog()`或`window.showModelessDialog()`方法打开的对话框窗口。当调用这些方法时，可以将一个变量作为第二个参数传递给新打开的窗口，这个变量就是`...

    模态窗口和非模态窗口

    创建非模态对话框则使用`window.showModelessDialog()`方法，它的用法与模态对话框相似，只是不返回`returnValue`，而是返回新窗口的引用，可以通过这个引用与非模态窗口进行交互。 控制对话框的大小和位置，可以在...

    子窗口向父窗口传递值

    对于使用`window.showModalDialog()`或`window.showModelessDialog()`方法打开的对话框，原理是类似的，只是调用方式和返回值处理略有不同。`showModalDialog()`可以返回一个值，这个值可以作为对话框关闭时的结果...

    JS弹出窗口代码大全(详细整理)

    这个例子同样使用 `window.open`，但这次设置的特征是 `'channelmode'`，它尝试模拟浏览器的全屏模式，但并不一定保证所有浏览器都支持此模式。代码如下： ```html ('//www.jb51.net', '软件开发网', 'channel...

Magicbox
Global site tag (gtag.js) - Google Analytics