实现原理
Popup简介
Popup对象是一种特殊的顶层窗口,主要用于出现在应用程序主窗口之间的对话框、消息框和其它临时窗口。
属性:
Document:获取给定弹出窗口中的HTML文档
isOpen:获取表明弹出窗口是否已打开的值
方法:
hide:关闭弹出窗口
show:在屏幕上显示弹出窗口
注意:popup对象IE5.5的脚本中可用。
Popup应用示例
<SCRIPT LANGUAGE="JScript">
var oPopup = window.createPopup();
var oPopupBody = oPopup.document.body;
oPopupBody.innerHTML = "在这里显示 <B>HTML</B>。";
oPopup.show(100, 100, 200, 50, document.body);
</SCRIPT>
实现原理
优酷的登录的弹出窗口就是利用了Popup对象来实现了窗口的弹出。
首先,用了一个名为popup.js的JavaScript文件对Popup对象就行封装,然后在首页添加一个JavaScript事件,当单击登录时显示弹出窗口。
function log()
{
Var pop=new Popup({contentType:1,isSupportDraging:false,isReloadOnClose:false,width:308,height:270});
pop.setContents({'title':'登录','contentUrl':'default2.aspx'});
pop.build().show();
}
Popup函数是在popup.js文件中写的一个函数,并不是系统自带的函数体,用该函数来初始化popup对象的一些属性。
然后,通过调用setContent方法来控制弹出窗口的标题及引用的页面,然后将弹出窗口显示出来。
在引用的页面方面,则是采用提交表单的形式将用户输入的数据发送给父页面,如果要关闭弹出的窗口,则可以采用函数parent.pop.close();
Popup小示例
html网页弹出Popup的任务栏小窗口
popup 对象
popup属性:
document 获取给定弹出窗口中的 HTML 文档。
isOpen 获取表明弹出窗口是否已打开的值。
popup方法:
hide 关闭弹出窗口。
show 在屏幕上显示弹出窗口。
<SCRIPT>
var oPopup = window.createPopup();//产生Popup窗口
var popTop=50;
function popmsg(msgstr){
var winstr="<table style=/"border: 1 solid #FFA6CA/" width=/"241/" height=/"172/" border=/"0/" cellpadding=/"0/" cellspacing=/"0/" background=/"pict/mybakc.jpg/" >";
winstr+="<tr><td height=/"30/"> </td></tr><tr><td align=/"center/"><table width=/"90%/" height=/"110/" border=/"0/" cellpadding=/"0/" cellspacing=/"0/">";
winstr+="<tr><td valign=/"top/" style=/"font-size:12px; color: red; face: Tahoma/">"+msgstr+"</td></tr></table></td></tr></table>";
oPopup.document.body.innerHTML = winstr;
popshow();
}
function popshow(){
window.status=popTop;//写入浏览器状态栏
//
if(popTop>1720){
clearTimeout(mytime);
oPopup.hide();
return;
}else if(popTop>1520&&popTop<1720){
oPopup.show(screen.width-250,screen.height,241,1720-popTop);
}else if(popTop>1500&&popTop<1520){
oPopup.show(screen.width-250,screen.height+(popTop-1720),241,172);
}else if(popTop<180){
oPopup.show(screen.width-250,screen.height,241,popTop);
}else if(popTop<220){
oPopup.show(screen.width-250,screen.height-popTop,241,172);
}
popTop+=10;
var mytime=setTimeout("popshow();",50);
}
popmsg("在Popup窗口中显示的内容");
</SCRIPT>
另一段代码如下:
<html>
<head>
<SCRIPT>
var oPopup = window.createPopup();
function window_onload() {
var oPopupBody = oPopup.document.body;
oPopupBody.style.backgroundColor = "lightyellow";
oPopupBody.style.border = "solid black 1px";
oPopupBody.innerHTML = "Display some <B>HTML</B> here.";
oPopup.show(0, 0, 200, 50);
}
</SCRIPT>
</head>
<body οnlοad="window_onload();">
</body>
</html>
参考资料:
1.优酷网
2. http://www.diybl.com/course/1_web/webjs/2008224/101690.html