弹出登录小窗口的原理

最新推荐文章于 2022-09-08 10:16:12 发布

峰北红

最新推荐文章于 2022-09-08 10:16:12 发布

阅读量2.9k

点赞数

文章标签： function javascript border html table 文档

实现原理

Popup简介

Popup对象是一种特殊的顶层窗口，主要用于出现在应用程序主窗口之间的对话框、消息框和其它临时窗口。

属性：

Document：获取给定弹出窗口中的HTML文档

isOpen：获取表明弹出窗口是否已打开的值

方法：

hide：关闭弹出窗口

show：在屏幕上显示弹出窗口

注意：popup对象IE5.5的脚本中可用。

Popup应用示例

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 在屏幕上显示弹出窗口。

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);