来自 服务器&运维 2019-12-29 05:22 的文章
当前位置: 澳门威尼斯人平台 > 服务器&运维 > 正文

js showModalDialog弹出窗口实例详解_javascript技巧_脚本之家

showModalDialog:模式窗口, 一种很特别的窗口,当它打开时,后面的父窗口的活动会停止,除非当前的模式子窗口关闭了, 才能操作父窗口.在做网页Ajax开发时,我们应该有时会用到它来实现表单的填写, 或做类似网上答题的窗口. 它的特点是,传参很方便也很强大,可直接调用父窗口的变量和方法.

a.html:

复制代码 代码如下:// JScript 文件var inputID, inputName;function ExpandSubCategory(iCategoryID, FahterID) {

使用方法: vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])

b.html:

var li_father = document.getElementById; if (li_father.getElementsByTagName //如果已经加载了下级节点则直接展开,不必在去读取数据 { ChangeStatus; return; }

参数说明: sURL-- 必选参数,类型:字符串。用来指定对话框要显示的文档的URL。

function returnValue(){window.opener.document.all.text1.value=document.getElementById.value;window.close();}  

//打开时显示稍等 switchNote; //AJAX回调函数,加载节点 used_car.BLL.T_BrandBaby.GetList("dm='品牌' and fID=" + iCategoryID, GetSubCategory_callback);}function ExpandSubCategoryAgain(iCategoryID, FahterID) {

vArguments-- 可选参数,类型:变体。用来向对话框传递参数。传递的参数类型不限,包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。

补充:window.opener 的用法

var li_father = document.getElementById; li_father.className = "Opened"; //打开时显示稍等 switchNote; //AJAX回调函数,加载节点 used_car.BLL.T_BrandBaby.GetList("dm='品牌' and fID=" + iCategoryID, GetSubCategory_callback);}function GetSubCategory_callback { var dt = response.value.Tables[0]; if { var iCategoryID = dt.Rows[0].fID; //父ID } var li_father = document.getElementById; var ul_sub = document.getElementById("ulTree_" + iCategoryID); if { li_father.removeChild } var ul = document.createElement; ul.id = "ulTree_" + iCategoryID for (var i = 0; i < dt.Rows.length; i++) { if (used_car.BLL.T_BrandBaby.GetList("dm='品牌' and fID=" + dt.Rows[i].id).value.Tables[0].Rows.length<1)// {// if (dt.Rows[i].ProductStyle_IsChild == 1) //如果已没有下一级节点 { var li = document.createElement; li.className = "Child"; li.id = "li_" + dt.Rows[i].id;

sFeatures-- 可选参数,类型:字符串。用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号“;”隔开。

window.opener 的用法在一般的用法中,只是用来解决关闭窗口时不提示弹出窗口, 而对它更深层的了解一般比较少。其 实 window.opener是指调用window.open方法的窗口。

var img = document.createElement; img.id = dt.Rows[i].id; img.className = "s"; img.src = "../../css/s.gif";

1.dialogHeight : 对话框高度,不小于100px,IE4中dialogHeight和dialogWidth默认的单位是em,而IE5中是px,为方便其见,在定义modal方式的对话框时,用px做单位。

在工作中主要是用来解决部分提交的。这种跨页操作对工作是非常有帮助的。

var a = document.createElement; var id = dt.Rows[i].id;

2.dialogWidth: 对话框宽度。

如果你在主窗口打开了一个页面,并且希望主窗口刷新就用这个,打开页面的window.opener就相当于

a.href = "javascript:OpenDocument('" + dt.Rows[i].id + "','" + dt.Rows[i].name + "');"; a.innerHTML = dt.Rows[i].name.sub; a.title = dt.Rows[i].name; } else //如果还有下级节点 { var li = document.createElement; li.className = "Closed"; li.id = "li_" + dt.Rows[i].id;

3.dialogLeft: 离屏幕左的距离。

主窗口的window。

var img = document.createElement; img.id = dt.Rows[i].id; img.className = "s"; img.src = "../../css/s.gif"; img.onclick = function () { ExpandSubCategory; }; img.alt = "展开/折叠";

4.dialogTop: 离屏幕上的距离。

主窗口的刷新你可以用

var a = document.createElement; a.href = "javascript:ExpandSubCategory("

5.center: {yes | no | 1 | 0 }: 窗口是否居中,默认yes,但仍可以指定高度和宽度。

window.opener.location.reload();

  • dt.Rows[i].id + ",'editCate');"; a.innerHTML = dt.Rows[i].name.sub; a.title = dt.Rows[i].name; } li.appendChild; li.appendChild; ul.appendChild; } li_father.appendChild; //先显示稍等。。。 switchNote;}

6.help: {yes | no | 1 | 0 }: 是否显示帮助按钮,默认yes。

如果你用虚拟的目录:如struts的*.do会提示你重试

// 叶子节点的单击响应函数function OpenDocument {

7.resizable: {yes | no | 1 | 0 }[IE5+]:是否可被改变大小。默认no。

你可以改成这样 window.opener.yourformname.submit()

shut(); // inputName.Value = "asddsafdf"; //修改之前 $.attr; //新添 var thisID = inputName.getAttribute; // alert(inputName.value +":"+ thisID + "--" + Action + "--" + iCategoryID); inputID.value = iCategoryID; clienkButton1();

8.status: {yes | no | 1 | 0 }[IE5+]:是否显示状态栏。默认为yes[ Modeless]或no[Modal]。

在应用中有这样一个情况,

}function ChangeStatus { var li_father = document.getElementById;

9.scroll:{ yes | no | 1 | 0 | on | off }: 指明对话框是否显示滚动条。默认为yes。 下面几个属性是用在HTA中的,在一般的网页中一般不使用。

在A窗口中打开B窗口,在B窗口中操作完以后关闭B窗口,同时自动刷新A窗口

if (li_father.className == "Opened") { li_father.className = "Closed"; } else { li_father.className = "Opened"; }}function ChangeStatus2 { var li_father = document.getElementById; if (li_father.className == "Closed") { li_father.className = "Opened"; } }function switchNote { var li_father = document.getElementById; if { var ul = document.createElement; ul.id = "ul_note_" + iCategoryID;

10.dialogHide:{ yes | no | 1 | 0 | on | off }: 在打印或者打印预览时对话框是否隐藏。默认为no。

function closeWin(){hasClosed = true;window.opener.location="javascript:reloadPage;}function window.onbeforeunload{window.opener.location="javascript:reloadPage();";}}

var note = document.createElement; note.className = "Child";

11.edge:{ sunken | raised }:指明对话框的边框样式。默认为raised。

上面的代码在关闭B窗口的时候会提示错误,说缺少Object,正确的代码如下:

var img = document.createElement; img.className = "s"; img.src = "../../css/s.gif";

12.unadorned:{ yes | no | 1 | 0 | on | off }: 默认为no。

function closeWin(){hasClosed = true;window.opener.location="javascript:reloadPage();";window.opener=null;window.close();}function window.onbeforeunload{//如果已经执行了closeWin方法,则不执行本方法window.opener.location="javascript:reloadPage();";}}reloadPage方法如下:function reloadPage;document.execCommanddocument.location = document.location;document.location.reload();}

var a = document.createElement; a.href = "javascript:void;"; a.innerHTML = "请稍候...";

FOR example:parent.html复制代码 代码如下:

PS:由于需要支持正常关闭和强制关闭窗口时能捕捉到事件,用了全局变量hasClosed

note.appendChild; note.appendChild; //ul.appendChild; li_father.appendChild; } else { var ul = document.getElementById("ul_note_" + iCategoryID); if { li_father.removeChild; } }}

child.html

==============================================

function InitTree { // 加载根节点 // writeDiv(); //alert(obj.value + "--" + idObj.value); inputName=obj; inputID = idObj; var pos = getPosition; var tree = document.getElementById; var root = document.createElement; var objshow = document.getElementById; objshow.style.top = pos[1] + pos[3] + "px"; objshow.style.left = pos[0] + "px"; objshow.style.display = "block"; tree.style.display = "block"; root.id = "li_" + FatherID; tree.appendChild; // 加载页面时显示第一级分类 ExpandSubCategory; ChangeStatus2;function writeDiv() { document.write("

补充,在父窗口是frame的时候在刷新父窗口的时候会出现问题:

"); document.write("

本文由澳门威尼斯人平台发布于服务器&运维,转载请注明出处:js showModalDialog弹出窗口实例详解_javascript技巧_脚本之家

关键词: