本页主题: 最基本的弹出窗口代码 打印 | 加为IE收藏 | 复制链接 | 收藏主题 | 上一主题 | 下一主题

www
我们都是钣金人,钣金部落连着你、我、他!!!
论坛先锋奖 优秀斑竹奖 灌水天才奖 论坛服务明星奖
级别: 论坛版主

 最基本的弹出窗口代码

0
其实代码非常简单: SskvxH+7  
<SCRIPT LANGUAGE="javascript"> S0( ).2#  
<!-- | Qo`K%8  
window.open ('page.html') nNJU@<| {*  
--> o1<Y#db[  
</SCRIPT> Z5 iP1/&D  
因为这是一段javascript代码,所以它们应该放在<SCRIPT LANGUAGE t}L kl(  
="javascript">标签和</script>之间。<!--和-->是对一些版本低的浏览器起作用,在这些老浏览器中如果不支持javascript,不会将标签中的代码作为文本显示出来。 J'c]':U  
{3n|=  
Window.open AyHhq8Y  
('page.html')用于控制弹出新的窗口page.html,如果page.html不与主窗口在同一路径下,前面应写明路径,绝对路径(http://)和相对路径(../)均可。 R-8>,  
YaiogA  
用单引号和双引号都可以,只是不要混用。 o 4G%m>$  
这一段代码可以加入HTML的任意位置,加入到<head>和</head>之间也可以,位置越靠前执行越早,尤其是页面代码较长时,又想使页面早点弹出就尽量往前放。 n N.6?a  
ipzv]c&  
*IBT!@*Q&  
【经过设置后的弹出窗口】 ED0\k $  
下面再说一说弹出窗口外观的设置。只要再往上面的代码中加一点东西就可以了。 g7\MFertR^  
我们来定制这个弹出窗口的外观、尺寸大小、弹出位置以适应该页面的具体情况。 }!_x \eq^  
<SCRIPT LANGUAGE="javascript:> 2J?ON|2M  
<!-- 581Jp'cje  
window.open ('page.html','newwindow','height=100,width=400,top=0,left=0, Pw c)u&  
toolbar=no,menubar=no,scrollbars=no,resizable=no, R1't W=  
location=no,status=no') n^}M*#  
//写成一行 2;8I0BH*'  
--> Eo h4#fZ\N  
</SCRIPT> cf\PG&S  
参数解释: Cn \5Vyrl  
<SCRIPT LANGUAGE="javascript"> js脚本开始; Evjvaa^  
window.open 弹出新窗口的命令; ;Gf,I1d}{  
page.html 弹出新窗口的文件名; %P3|#0yg0  
newwindow 弹出窗口的名字(不是文件名),可用空 ″代替; JXT%@w>I  
height=100 窗口高度; f&=WgITa  
top=0 窗口距离屏幕上方的像素值; 5Q/&,NP  
left=0 窗口距离屏幕左侧的像素值; kdq<)>"  
toolbar=no 是否显示工具栏,yes为显示; k U75  
menubar,scrollbars 表示菜单栏和滚动栏; DfPC@` k  
resizable=no 是否允许改变窗口大小,yes为允许; \zx &5a #  
location=no 是否显示地址栏,yes为允许; i(Xz3L#(  
status=no 是否显示状态栏内的信息(通常是文件已经打开),yes为允许; ]J '#KT{  
</SCRIPT> js脚本结束。 SlaHhq3  
>b1#dEY  
【用函数控制弹出窗口】 Y^Y1re+}  
下面是一个完整的代码。 On`T pz/  
<html> DN X-\  
<head> gs:V4$(p4  
<script LANGUAGE="javascript"> \jpm   
<!-- zbL8 pp  
function openwin(){ c e\| eN[  
window.open("page.html","newwindow","height=100,width=400,toolbar=no,menubar=no,scrollbars=no,resizable=no, o0)k5P~ <~  
3UNmUDl[~  
location=no,status=no";) |y%M";MI  
//写成一行 \' Z^rjB  
} sQ aP:@  
--> L#~z#  
</script> 0_f6Qrcj  
</head> -L6V)aK&  
<body onload="openwin()"> U?e.)G  
...任意的页面内容... YcdT/  
</body> LSlY Yyt  
</html> OaF[t*]D3  
这里定义了一个函数openwin(),函数内容就是打开一个窗口。在调用它之前没有任何用途。怎么调用呢? =C4!h'hz  
方法一:<body onload="openwen()"> 浏览器读页面时弹出窗口; N6<G`k,  
方法二:<body onunload="openwen()"> 浏览器离开页面时弹出窗口; ~ \3j{pr  
方法三:用一个连接调用:<a href="#" onclick="openwin()">打开一个窗口</a> &Ndq ^!e  
注意:使用的"#"是虚连接。 zcCGR Ee=  
方法四:用一个按钮调用:<input type="button" onclick="openwin()" value="打开窗口">  c W^  
7T/hmVi_  
【主窗口打开文件1.htm,同时弹出小窗口page.html】 ?5Q_G1H&  
将如下代码加入主窗口<head>区: i7|sVz=  
<script language="javascript"> "jA?s9  
<!-- 1 R,?kUa  
function openwin(){ 4) z*Vux  
window.open("page.html","","width=200,height=200" ;) ]`T*}$|  
} c?7 Wjy  
//--> ;Vlt4,s)  
</script> $G D@e0  
加入<body>区:<a href="1.htm" onclick="openwin()">open</a>即可。 vQsI^p  
S0jYk (  
【弹出的窗口之定时关闭控制】 lL6W:Fq@(  
下面我们再对弹出窗口进行一些控制,效果就更好了。如果我们再将一小段代码加入弹出的页面(注意是加入到page.html的HTML中,可不是主页面中,否则…),让它在10秒钟后自动关闭是不是更酷了?  Mcm%G#  
~pG,|\9  
首先,将如下代码加入page.html文件的<head>区: u3])_oj=  
<script language="javascript"> +A%"_7L}  
function closeit() { -E,p[Sp  
setTimeout("self.close()",10000) //毫秒 CCp&+LRvR  
} ,;k`N`#'  
</script> AroYDR,3+  
然后,再用<body ]m@p? A$  
onload="closeit()">这一句话代替page.html中原有的<BODY>这一句就可以了。(这一句话千万不要忘记写啊!这一句的作用是调用关闭窗口的代码,10秒钟后就自行关闭该窗口。) v/z~ j  
cd:VFjT  
E-"b":@:  
【在弹出窗口中加上一个关闭按钮】 S?e*<s9k  
<form> [&K"OQ^\2h  
<INPUT TYPE='BUTTON' value='关闭'> mt*/%>@7R  
</form> /Q\|u:oO,  
呵呵,现在更加完美了! BX-fV|  
h[}e5A]}  
【内包含的弹出窗口——一个页面两个窗口】 R(W}..U0R"  
上面的例子都包含两个窗口,一个是主窗口,另一个是弹出的小窗口。 Dhzm C  
通过下面的例子,你可以在一个页面内完成上面的效果。 I.hy"y2&  
<html> r l>e~i  
<head> | rwx; +  
<SCRIPT LANGUAGE="javascript"> MVOWJaT(Aq  
function openwin() h}yfL@  
{ @JU Xp  
OpenWindow=window.open("","newwin","height=250,width=250,toolbar=no,scrollbars="+scroll+",menubar=no";); b3l ~wp6>  
O 2W2&vY  
//写成一行 0q_?<v_ 1  
OpenWindow.document.write("<TITLE>例子</TITLE>" ;) B(,j*,f  
OpenWindow.document.write("<BODY BGCOLOR=#FFFFFF>" ;) E?cf#;2h8m  
OpenWindow.document.write("<H1>Hello!</h1>" ;) { \ ]KYI0  
OpenWindow.document.write("New window opened!" ;) xy+hrbD)j  
OpenWindow.document.write("</BODY >" ;) ]!v\whZ>  
OpenWindow.document.write("</HTML>" ;) ,)Z1&J?  
OpenWindow.document.close() aqKrf(R v  
} 'W*ODAz6  
</script> uL |O<  
</head> oL -udH  
<body> {"mb)zr  
<a href="#" onclick="openwin()">打开一个窗口</a> /kNSB;  
<input type="button" onclick="openwin()" value="打开窗口"> ]+d> ;$O  
</body> 9@wmngvM*Y  
</html> k FCdGl  
看看OpenWindow.document.write()里面的代码不就是标准的HTML吗?只要按照格式写更多的行即可。千万注意多一个标签或少一个标签都会出现错误。记住用OpenWindow.document.close()结束啊。 X.[8L^ldh  
<8BNqbX  
`qhZZ{s)1U  
【终极应用——弹出窗口的Cookie控制】 !xE@r,'oN  
回想一下,上面的弹出窗口虽然酷,但是有一点小毛病(你沉浸在喜悦之中,一定没有发现吧?)比如你将上面的脚本放在一个需要频繁经过的页面里(例如首页),那么每次刷新这个页面,窗口都会弹出一次,是不是非常烦人?有解决的办法吗?Yes!Follow S=qx,<J 39  
me。我们使用Cookie来控制一下就可以了。 ~'0W(~Q8  
首先,将如下代码加入主页面HTML的<HEAD>区: k;Ask#rs  
<script> VvTi>2(.  
function openwin(){ H0 -v^H>^  
window.open("page.html","","width=200,height=200" ;) S@cKo&^  
} j.+ }Z |  
function get_cookie(Name){ (W5JVk_o  
var search = Name+ "=" Y'76!Y  
var returnvalue =""; 3o`c`;H%p  
if (documents.cookie.length >0){ G(gZL%M6  
offset = documents.cookie.indexOf(search) f47dB_{5f.  
if (offset!=-1){ CvRO'  
offset += search.length  NR98]X  
end = documents.cookie.indexOf (";",offset); :*MR$Jf  
if (end ==-1) '3fN2[(  
end = documents.cookie.length; :ka^ ztXG  
returnvalue =unescape(documents.cookie.substring(offset,end)) mX[J15  
} vrIWw?/z?  
} N 5.kDT  
return returnvalue; 2yV^'o)  
} \k5 sdHmI[  
function loadpopup(){ GOD{?#c$  
if (get_cookie('popped')==";){ c^stfFE&  
openwin() lYS*{i1^ '  
documents.cookie="popped=yes" /Ow@CB  
}  &Qq|  
} b-RuUfUn0  
</script> WZ=$c]gG  
然后,用<body onload="loadpopup()">(注意不是openwin ZFs xsg^r  
而是loadpop啊)替换主页面中原有的<BODY>这一句即可。你可以试着刷新一下这个页面或重新进入该页面,窗口再也不会弹出了。真正的Pop-Only-Once! mJYD"WgY  
/7x1Z*Hg  
写到这里,弹出窗口的制作和应用技巧基本上算是讲完了,希望对正在制作网页的朋友有所帮助我就非常欣慰了。 k; >Vh'=X  
需要注意的是,JS脚本中的大小写最好前后保持一致。 @hy~H?XN  
$laUkD#vz  
没有菜单、工具栏、地址栏的弹出窗口: g.\%jDM  
zbgGK7  
<script language="javascript"> _fSBb<  
<!-- )S;3WnQ)  
var gt = unescape('%3e'); vM50H  
var popup = null; -hc8IS  
var over = "Launch Pop-up Navigator"; t7Mq>rFB  
popup = window.open('', 'popupnav', Pm, .[5uc  
'width=500,height=500,resizable=0,scrollbars=auto'); // |(AFU3 ~  
width=500,height=500为窗口长和宽 4c[/%e:\-  
if (popup != null) { K$w;|UJc  
if (popup.opener == null) { %ZX9YuXQ  
popup.opener = self; } {&UA6 0~6  
popup.location.href = '要打开的文件名'; [YZgQ  
} 3+(lK d  
// --> W6_ rSVm  
</script> '#h ORQB  
搜索更多相关文章:推荐 资料 教程 免费 设计
呵呵,钣金部落,我总算找到一个家了!!!
顶端 Posted: 2008-04-07 08:25 | [楼 主]
帖子浏览记录 版块浏览记录
钣金部落高峰论坛 » 免费综合

Time now is:12-03 09:32, Gzip enabled 浙ICP备06052510号
Powered by PHPWind & Uu1001 v2.0 Certificate Code © 2003-08 PHPWind.com Corporation