分享
 
 
 

JavaScript窗口功能指南之创建弹出窗口

王朝html/css/js·作者佚名  2006-01-08
窄屏简体版  字體: |||超大  

JavaScript窗口功能指南之创建弹出窗口

(作者:听风编译2001年01月19日 11:35)

Internet Explorer 5.5支持一个新的window对象的方法:creatPopup()。你可以向下面一样创建一个弹出窗口:

var popupObj = window.createPopup();

当你创建了这个对象后,弹出窗口并不显示。你必须要调用它的show方法:

popupObj.show(yOffset, xOffset, width, height, referenceObj)

在这里:

yOffset 是弹出窗口距离屏幕左上角的水平偏移。

xOffset 是弹出窗口距离屏幕左上角的垂直偏移。

width 是弹出窗口的宽度。

height 是弹出窗口的高度。

referenceObj 是一个可选参数,它替代屏幕左上角做为引用yOffset 和 xOffset 的参照。

让我们示范一下新的弹出窗口的用处。如果你点击下面的链接,一个所有这个教程的菜单就会弹出来。注意,当菜单弹出时,页面就滚动回到它的顶部。我们怎么样执行这个弹出窗口呢?首先,你需要定义一个可见菜单,它随后会被转载进弹出菜单。为了实现隐藏链接,可以将菜单放置到一个隐藏的位置。我们选择位置(-1000,-1000),并在菜单的style标记中定义它(在HEAD段的某个地方):

<STYLE>

.menu {position: absolute; top: -1000; left: -1000}

</STYLE>

我们执行菜单做为表格的链接:

<TABLE CLASS=menuID=submenu>

<TR><TD NOWRAP>

<A HREF="names.html" TARGET="CONTENT">How to name your windows and frames</A>

</TD></TR>

<TR><TD NOWRAP>

<A HREF="open.html">How to open a new window</A>

</TD></TR>

<TR><TD NOWRAP>

<A HREF="features.html">How to specify the features of a new window</A>

</TD></TR>

<TR><TD NOWRAP>

<A HREF="utilize.html">How to utilize the window features</A>

</TD></TR>

<TR><TD NOWRAP>

<A HREF="exist.html">How to check if a window exists</A>

</TD></TR>

<TR><TD NOWRAP>

<A HREF="reference.html">How to close a window</A>

</TD></TR>

<TR><TD NOWRAP>

<A HREF="manipulate.html">How to manipulate a window</A>

</TD></TR>

<TR><TD NOWRAP>

<A HREF="write.html">How to write content to a window</A>

</TD></TR>

<TR><TD NOWRAP>

<A HREF="opener.html">How to reference the opener</A>

</TD></TR>

<TR><TD NOWRAP>

<A HREF="dialog.html">How to create a dialog box</A>

</TD></TR>

<TR><TD NOWRAP>

<A HREF="popup.html">How to create a pop-up window</A>

</TD></TR>

<TR><TD></TD></TR>

</TABLE>

链接本身(教程的页面)不会改变URL,但是当被点击时,就调用showMenu()函数:

<A HREF='#' ONCLICK='showMenu(this, submenu)'>Tutorial's Pages</A>

showMenu()函数有2个参数,一个是链接对象,它调用函数,另一个是菜单的ID。我们要采取的第一个行为是分配弹出窗口的body对象:

var popupBodyObj = popupObj.document.body;

然后,设置边界为1象素,紫色,固体样式:

popupBodyObj.style.border = "1px purple solid";

填充弹出窗口的内容绝不是一个琐碎的工作,实现的一个方法就是使用innerHTML和outerHTML:

popupBodyObj.innerHTML = menuID.outerHTML;

接着,我们需要对页面的所有链接指派onClick事件处理程序,定义这个事件的响应函数为doclick。

for (var i = 0; i < popupBodyObj.all.length; i++) {

if (popupBodyObj.all[i].tagName == "A")

popupBodyObj.all[i].onclick = doClick;

}

下面是showMenu()函数的全部代码:

function showMenu(linkObj, menuID) {

var popupObj = window.createPopup();

var popupBodyObj = popupObj.document.body;

popupBodyObj.style.border = "1px purple solid";

popupBodyObj.innerHTML = menuID.outerHTML;

for (var i = 0; i < popupBodyObj.all.length; i++) {

if (popupBodyObj.all[i].tagName == "A")

popupBodyObj.all[i].onclick = doClick;

}

popupObj.show(0, linkObj.offsetHeight, menuID.offsetWidth, menuID.offsetHeight, linkObj);

}

函数的最后一条语句是显示弹出窗口。我们将弹出窗口放置于调用它的链接linkObj旁边。如果你省略了这个引用,弹出窗口将参照屏幕左上角被放置。水平偏移是0。为了避免窗口弹出时链接被隐藏,我们要设置对于链接高度的垂直偏移,linkObj.offsetHeight。很自然,我们设置窗口的宽度和高度为初始菜单的宽度(menuID.offsetWidth)和高度(menuID.offsetHeight)。

函数doClick()是一个2行代码的程序,它修改当前窗口的URL(parent.href)为点击链接的URL(this):

function doClick() {

parent.location = this.href;

return false;

}

总结

在这个教程中,我们试图覆盖JavaScript有关窗口相关特征的大多数内容。我们给你展示了如何根据你的要求打开一个新窗口,怎样在窗口中写内容,操纵它,关闭它。同时,我们介绍了如何引用打开窗口的父窗口。最后,我们接触到2个特殊类型的窗口:对话框和弹出窗口。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有