打印

[建站经验与技巧] 绝对经典的弹出窗口设置

绝对经典的弹出窗口设置


$ r$ Q, ]2 Q5 W  c, i9 L: \【1、最基本的弹出窗口代码】
" R. t, B% M1 L9 B* V% A  p为互联网事业发展提供源动力!
! w) j: R5 B# Z, R$ X163k团购网站系统官方服务论坛其实代码非常简单:
0 \( t- Y3 Z# f, L& zbbs.163k.com
, I0 W6 P4 g  t2 K163k团购网站系统官方服务论坛<script language="javascript">
, y/ }* G, {9 Q( |& e163K网站系统官方论坛<!--
1 r3 E" `6 @. b, Z" b团购网站系统,团购网程序window.open (''''page.html'''')
1 i5 {/ Z" b! g$ ]. w) K-->
# p$ t9 R$ O0 `% f. x163k团购网站系统官方服务论坛</script>
3 g* {+ A" I! z& G/ V因为着是一段javascripts代码,所以它们应该放在<script language="javascript">标签和</script>之间。<!-- 和 -->是对一些版本低的浏览器起作用,在这些老浏览器中不会将标签中的代码作为文本显示出来。要养成这个好习惯啊。 团购网站系统,团购网程序7 k; k  H5 p+ f' P
window.open (''''page.html'''') 用于控制弹出新的窗口page.html,如果page.html不与主窗口在同一路径下,前面应写明路径,绝对路径(http://)和相对路径(../)均可。用单引号和双引号都可以,只是不要混用。
  \/ F; G: `) ]3 k3 J这一段代码可以加入html的任意位置,<head>和</head>之间可以,<body>间</body>也可以,越前越早执行,尤其是页面代码长,又想使页面早点弹出就尽量往前放。 团购网站系统,团购网程序2 @1 J8 n3 L( E
bbs.163k.com" `6 `- x4 d) B. x* v
bbs.163k.com* f" Y" ~, l! |- @

6 M; s5 U6 Q& G0 y0 D163K网站系统官方论坛【2、经过设置后的弹出窗口】 163k团购网站系统官方服务论坛# G, q. J5 Z6 {8 n" g

& s: ~' d4 l' v+ r& ?7 U/ Y- ?bbs.163k.com下面再说一说弹出窗口的设置。只要再往上面的代码中加一点东西就可以了。 为互联网事业发展提供源动力!! i" F# k  R! P
我们来定制这个弹出的窗口的外观,尺寸大小,弹出的位置以适应该页面的具体情况。 团购网站系统,团购网程序8 I* _2 n- f4 T( V) B0 |1 U! M) Q
<script language="javascript">
+ j4 m: z  X4 B团购网站系统,团购网程序<!-- 163k团购网站系统官方服务论坛! y: V/ z7 F5 ]8 P2 g1 p+ F* e9 p& w
window.open (''''page.html'''', ''''newwindow'''', ''''height=100, width=400, top=0,left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no'''') 4 w9 t& A' ]3 ^
//写成一行
+ P- _, L. d% r团购网站系统,团购网程序--> bbs.163k.com/ E3 s* b* C$ l
</script> 163k团购网站系统官方服务论坛4 _/ l  [( `% j- p5 P+ v
参数解释:
* Q, v- \  J2 y+ @) Obbs.163k.com<script language="javascript"> js脚本开始;
5 R+ A( W2 K& x9 M: `! c4 ~) Hwindow.open 弹出新窗口的命令; 团购网站系统,团购网程序* N. {6 w/ E9 i( V8 c+ `# ?, _* [
''''page.html'''' 弹出窗口的文件名;
5 b- `/ B6 S$ C% R8 u( P+ H团购网站系统,团购网程序''''newwindow'''' 弹出窗口的名字(不是文件名),非必须,可用空''''''''代替; 为互联网事业发展提供源动力!6 U7 x. i. L- u
height=100 窗口高度;
. |( `# g/ P7 o- G6 w: W! l' B为互联网事业发展提供源动力!width=400 窗口宽度;
0 r6 D4 [+ G$ X团购网站系统,团购网程序top=0 窗口距离屏幕上方的象素值;
, T$ N- c+ n9 \! C/ H163k团购网站系统官方服务论坛left=0 窗口距离屏幕左侧的象素值;
* d& x6 q. O7 u8 I4 A163k团购网站系统官方服务论坛toolbar=no 是否显示工具栏,yes为显示;
# Y, h* `! L6 I1 p; I! T为互联网事业发展提供源动力!menubar,scrollbars 表示菜单栏和滚动栏。
1 ?0 ~# |2 E6 _. P) S9 P为互联网事业发展提供源动力!resizable=no 是否允许改变窗口大小,yes为允许;
7 q) ^* L  }) v& Y: {  Pbbs.163k.comlocation=no 是否显示地址栏,yes为允许;
7 k0 q3 Y( g; P) A4 F, }为互联网事业发展提供源动力!status=no 是否显示状态栏内的信息(通常是文件已经打开),yes为允许; 9 L2 N  T) v# w2 ^5 e" E% }4 [3 K
</script> js脚本结束
: s! T; f5 D8 @7 K# h163K网站系统官方论坛163k团购网站系统官方服务论坛: b5 d9 F6 B; h0 \( s. x0 H
5 h% P: V0 }3 F. f  G# Y$ r0 i
【3、用函数控制弹出窗口】
6 R5 b% v. J2 b: y团购网站系统,团购网程序
1 @$ p& Q' |) m% g: J; ]$ r4 F163K网站系统官方论坛下面是一个完整的代码。 为互联网事业发展提供源动力!1 G6 Q/ Z" x6 g& o4 a( r+ P
<html> ( T  `& H6 W6 p' u0 b) @4 ^
<head>
5 {/ e0 N- l; Z4 b7 Z3 x2 X4 ]163K网站系统官方论坛<script language="javascript"> bbs.163k.com; U, D7 F- _- r
<!--
' k# N! E8 u( d' g3 r7 b163K网站系统官方论坛function openwin() { window.open ("page.html", "newwindow", "height=100, width=400, toolbar=
9 W1 X$ [& [7 zbbs.163k.comno, menubar=no, scrollbars=no, resizable=no, location=no, status=no")
, R: |7 c* Y3 s团购网站系统,团购网程序//写成一行
/ U  g9 ^2 D# ]5 L}
! E3 v& H9 _* Y$ ]为互联网事业发展提供源动力!//--> 163k团购网站系统官方服务论坛9 o. z7 U  @/ f0 |: B
</script> 为互联网事业发展提供源动力!  h. L6 r5 ~$ D9 C& o8 v
</head> . W, }/ t( T6 g8 `: n; m
<body onload="openwin()">
: h% u5 ^8 C: N$ t, `% Vbbs.163k.com...任意的页面内容... 团购网站系统,团购网程序9 B' H+ I: K! d8 t- p: c& }
</body> bbs.163k.com# |3 Y3 X0 O9 `& X: i7 U" D
</html>
" l$ @3 v0 t# ]$ b1 e9 T团购网站系统,团购网程序这里定义了一个函数openwin(),函数内容就是打开一个窗口。在调用它之前没有任何用途。
# R- w& s' |: z为互联网事业发展提供源动力!怎么调用呢?
1 C; F; ]1 D0 K) B6 I$ w163k团购网站系统官方服务论坛方法一:<body onload="openwin()"> 浏览器读页面时弹出窗口; . s; D, \( ~; I9 C; }( n0 G( v
方法二:<body onunload="openwin()"> 浏览器离开页面时弹出窗口;
7 h: F- U& o* _% e. x6 k3 V1 h为互联网事业发展提供源动力!方法三:用一个连接调用: 为互联网事业发展提供源动力!6 d/ D3 ]& [4 G- @7 i8 T2 O
<a href="#" onclick="openwin()">打开一个窗口</a>
8 ]. D# l4 s2 U6 Y% A为互联网事业发展提供源动力!注意:使用的“#”是虚连接。
- }6 w* Q% A0 E' j团购网站系统,团购网程序方法四:用一个按钮调用:
  ?5 v$ I- ]$ C, U) Y3 H  I为互联网事业发展提供源动力!<input type="button" onclick="openwin()" value="打开窗口">
/ I2 D/ f! A$ s* r
5 N2 h# ^& P- ^# K5 Abbs.163k.com【4、同时弹出2个窗口】 为互联网事业发展提供源动力!- m2 Z0 s& Y9 L0 a0 J7 n0 p% L* F
163K网站系统官方论坛8 B9 [' ]0 P! G. d* t: s
对源代码稍微改动一下:
3 G1 k; X" ?1 X; E4 S* {9 I2 Z5 [<script language="javascript"> ! u0 K- {! n) l2 {- k" Y7 J
<!-- / F0 R1 n7 P: w! `
function openwin() 为互联网事业发展提供源动力!! G/ R  c& M& c9 x  Q+ v8 C& G: ^
{ window.open ("page.html", "newwindow", "height=100, width=100, top=0,left=0,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")
! x) ^" ]8 o0 ?2 k) O9 c# Sbbs.163k.com//写成一行 163K网站系统官方论坛2 M" P* w" s3 B5 R. f  S6 J
window.open ("page2.html", "newwindow2", "height=100, width=100, top=100, left=100,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no") 163k团购网站系统官方服务论坛( M' A5 N0 x; _8 @4 y) V. G3 F
//写成一行 163K网站系统官方论坛* a% m8 m# l2 C& Z( j/ |2 K
} 为互联网事业发展提供源动力!- y" E: R! K3 [% M5 c
//--> 163K网站系统官方论坛" R' i: ?: n7 w. s. m: N: K
</script>
* A: C! z" V1 T  a. g+ F$ V$ ?团购网站系统,团购网程序为避免弹出的2个窗口覆盖,用top和left控制一下弹出的位置不要相互覆盖即可。最后用上面说过的四种方法调用即可。 bbs.163k.com5 a8 t7 G. L; i8 u$ p/ o

* k0 @; W- Q$ |0 }; o/ W8 lbbs.163k.com注意:2个窗口的name(newwindows和newwindow2)不要相同,或者干脆全部为空。ok?
& D7 O* Y% @; \" R' }5 v. ?: T163k团购网站系统官方服务论坛团购网站系统,团购网程序9 ]0 i5 l1 U3 t+ W; p$ Z0 w' ?- {2 }- W
【5、主窗口打开文件1.htm,同时弹出小窗口page.html】
9 T0 o2 D# S; h. p$ J
2 v. K8 b* i) {: d7 ~2 D( l  c为互联网事业发展提供源动力!
- ^! f' \3 _; y; z1 a% ]1 {+ ?. O163K网站系统官方论坛如下代码加入主窗口<head>区: 为互联网事业发展提供源动力!4 u$ X( J# t1 \; B) u* h1 M6 g
<script language="javascript"> 团购网站系统,团购网程序0 w- _1 V% ]! k2 Z& n+ j4 }
<!--
0 Y6 m) l, i$ j' p5 k% y为互联网事业发展提供源动力!function openwin()
* \' O. c8 q0 {2 x为互联网事业发展提供源动力!{window.open("page.html","","width=200,height=200")
- o* |# r' r2 X  X" n  S- Pbbs.163k.com} 为互联网事业发展提供源动力!( L. |6 o6 C3 u( n0 a7 ?' \4 Z4 u
//--> 163K网站系统官方论坛7 H, M; T. T6 q, x# P" c& E, P
</script> bbs.163k.com; Z. c$ I5 ~) |3 M& j6 I+ v: X
加入<body>区:
9 l3 V/ G# G$ G: ebbs.163k.com<a href="1.htm" onclick="openwin()">open</a>即可。 团购网站系统,团购网程序! b& A1 M4 G7 |8 U" G
团购网站系统,团购网程序8 @2 n: E* k% d, a2 R! W
【6、弹出的窗口之定时关闭控制】 bbs.163k.com" z7 C7 K' W; {$ f

1 \% [- J9 M' `6 l' q163K网站系统官方论坛下面我们再对弹出的窗口进行一些控制,效果就更好了。如果我们再将一小段代码加入弹出的页面(注意是加入到page.html的html中,可不是主页面中,否则...),让它10秒后自动关闭是不是更酷了? 0 q' ]* B+ E+ K" h4 s6 y: A* C
为互联网事业发展提供源动力!: j; C: g$ i, x$ {7 y: P
首先,将如下代码加入page.html文件的<head>区:
- q3 z( j+ Z4 f% p! abbs.163k.com<script language="javascript">
8 T% I. |( W$ }$ b' Tfunction closeit() 163K网站系统官方论坛2 D8 `$ b/ N6 m
{settimeout("self.close()",10000) //毫秒}
, b* B0 Z" Y7 {, K( bbbs.163k.com</script> 团购网站系统,团购网程序. P' f6 u5 D5 c' ]3 ^4 R9 m+ |) r
然后,再用<body onload="closeit()"> 这一句话代替page.html中原有的<body>这一句就可以了。(这一句话千万不要忘记写啊!这一句的作用是调用关闭窗口的代码,10秒钟后就自行关闭该窗口。)
& F, W( A) {/ W. vbbs.163k.com" l8 P$ v  M$ Y9 V' M  T  r5 `" p& P1 \
【7、在弹出窗口中加上一个关闭按钮】 bbs.163k.com; @2 Y! J7 E0 O8 [+ q
6 c, q( o; A8 T4 Z, \+ X% {( T( b; b
<form> 163k团购网站系统官方服务论坛( y& z+ Q1 Z8 h" s' }* Z, _
<input type=''button'' value=''关闭'' onclick=''window.close()''> # r! D+ T& R! P' O$ j/ p; U! Z, |
</form> 163k团购网站系统官方服务论坛! k9 I& f7 F3 G) d& A+ I
呵呵,现在更加完美了! 163k团购网站系统官方服务论坛  C7 h9 I9 f. E; \/ {  {# I

: D7 R0 B0 \4 y2 i6 _【8、内包含的弹出窗口-一个页面两个窗口】
- y1 a3 h9 l0 {# q  Y为互联网事业发展提供源动力!团购网站系统,团购网程序# Y6 j  D1 h' q. q0 S
上面的例子都包含两个窗口,一个是主窗口,另一个是弹出的小窗口。
2 O( L1 ]# ^* ~4 O2 d4 Z为互联网事业发展提供源动力!163K网站系统官方论坛  t  Q  M5 D: }# K
通过下面的例子,你可以在一个页面内完成上面的效果。 团购网站系统,团购网程序3 K# ?1 {% C; b2 U. ~' L
<html> 团购网站系统,团购网程序' N- ^! I4 D% w( K/ v! T6 [0 M% j0 |0 a
<head>
! e# q& \- a# _5 I) B# [<script language="javascript">
' l  W: w6 g0 t- Hbbs.163k.comfunction openwin()
$ i4 |/ C, l+ M% W" M2 L+ P( I$ T7 E{openwindow=window.open("", "newwin", "height=250, width=250,toolbar=no,scrollbars="+scroll+",menubar=no");
& T$ o; @& G! b2 [3 [为互联网事业发展提供源动力!//写成一行
/ {' X3 v! Q5 w- o0 e; @为互联网事业发展提供源动力!openwindow.document.write("<title>例子</title>") 为互联网事业发展提供源动力!' E$ [( j: y* s9 F  O7 w1 w: Y
openwindow.document.write("<body bgcolor=#ffffff>") 1 f7 m* K) e! c+ W/ e+ E
openwindow.document.write("<h1>hello!</h1>")
( i/ ^1 M/ T. ^7 ?openwindow.document.write("new window opened!")
4 i5 J! @' X3 g) ]2 A; X163K网站系统官方论坛openwindow.document.write("</body>")
+ d' A# E( N) b3 J  S; R3 I5 O为互联网事业发展提供源动力!( ?* S: `; v. l5 d5 \0 W3 H
openwindow.document.write("</html>")
5 r$ Z! n% u5 Q6 Obbs.163k.com5 I8 I* y' ]: k
openwindow.document.close()} 163k团购网站系统官方服务论坛  L; @% T/ d' s* u- w
</script> 为互联网事业发展提供源动力!# T9 i! R4 q* c3 {( Y) e
</head> bbs.163k.com3 B/ Z) K+ a/ ^; ?% W
<body> + r8 q% ~* {0 q) I  ~. X5 s
<a href="#" onclick="openwin()">打开一个窗口</a> 为互联网事业发展提供源动力!7 O! C. Q& t! a' @3 F
<input type="button" onclick="openwin()" value="打开窗口">
, W2 t) w" o; g' T2 T0 \3 w163K网站系统官方论坛</body> 为互联网事业发展提供源动力!; M% R4 G% z3 J
</html>
7 _. g! n. m9 H$ P团购网站系统,团购网程序看看 openwindow.document.write()里面的代码不就是标准的html吗?只要按照格式写更多的行即可。千万注意多一个标签或少一个标签就会出现错误。记得用openwindow.document.close()结束啊。
/ D% d& M3 ~# G4 \$ s4 t. n* G2 o163k团购网站系统官方服务论坛163K网站系统官方论坛3 b3 O. P) N2 l- |) e
163k团购网站系统官方服务论坛% A4 K& W  T# q0 U/ j0 H0 u! v

3 s& u+ o5 \8 ?bbs.163k.com
3 g) f* M. {& t% Q* x团购网站系统,团购网程序
# C& [/ w8 w* P% K! V[此贴由 down168 转自 网站建设资源 ] 为互联网事业发展提供源动力!+ A+ i1 z/ X0 t
发贴时间:2005-12-19 23:11:19
% B% S* s2 x/ f8 ?! I团购网站系统,团购网程序------------------------------------------------------
7 c/ j+ M9 }+ E1 q163K网站系统官方论坛
, E+ J- B1 `. U+ {! R4 k( Y163K网站系统官方论坛210.82.241.* 买域名空间,找it工作。     
9 ?" Y9 ]* p& M+ b8 d$ q5 Y7 V! o  k团购网站系统,团购网程序
4 ~! Q( D, p% j/ U5 o  A, N3 W163k团购网站系统官方服务论坛季风 163k团购网站系统官方服务论坛' w5 `) t( l1 Q8 g

* R" _& r! s3 n163K网站系统官方论坛信誉:110 团购网站系统,团购网程序( \; J6 T- p* I
职称:信心网络会员 163k团购网站系统官方服务论坛% k, V8 j7 m4 M$ h% K
发贴:654 163K网站系统官方论坛( O7 [# W3 d9 u& }6 u
xb:26857 163k团购网站系统官方服务论坛$ |# }) }0 C' B$ U( I" t
等级:圣骑士
7 e6 k9 `( e1 }8 n* A163k团购网站系统官方服务论坛
. ?& o0 v! v9 jbbs.163k.com注册:2004-05-10
! ?* Q" {  ?% S$ [0 F. R$ h163k团购网站系统官方服务论坛查看资料 引用回复 直接回复 楼主 163k团购网站系统官方服务论坛1 M2 Q3 p1 x+ n
163k团购网站系统官方服务论坛% i% H# h. l9 Q
爆破仪表
  N" g( M5 N  Q. U; p
' h1 d$ M. T9 {% q; t0 k为互联网事业发展提供源动力!1级建站宠物
* x3 N9 l$ G) B' C' m/ w为互联网事业发展提供源动力!心情:普通1 A7 f9 u+ L# R- T. U1 k0 s
幸运:10 为互联网事业发展提供源动力!2 W( T  d6 X: W3 p/ f* D* l- F0 W' m
bbs.163k.com) `0 G: u# W- Z) N# k

0 Q/ d4 _' |" |& p& t. a团购网站系统,团购网程序【9、终极应用--弹出的窗口之cookie控制】 % r7 u5 Z- e! O4 |. v4 E9 G

9 ^; g# c' O+ z, `7 ~. x/ Q163k团购网站系统官方服务论坛回想一下,上面的弹出窗口虽然酷,但是有一点小毛病(沉浸在喜悦之中,一定没有发现吧?)比如你将上面的脚本放在一个需要频繁经过的页面里(例如首页),那么每次刷新这个页面,窗口都会弹出一次,是不是非常烦人?:-(有解决的办法吗?yes! ;-) follow me. 163K网站系统官方论坛% ?; I7 [2 m  x! B+ d; p& L

) M8 t9 @6 K3 m( V3 c163K网站系统官方论坛我们使用cookie来控制一下就可以了。
0 Z; A! w) p3 H$ d- M+ n/ P2 W: H5 cbbs.163k.com
1 O+ N7 R  W+ s# Y! `/ Y+ r2 x163K网站系统官方论坛首先,将如下代码加入主页面html的<head>区: 团购网站系统,团购网程序. G! x6 T! q& u1 Y/ Y
<script>
# g. X8 e( q- {- ~8 ^163k团购网站系统官方服务论坛function openwin() 163K网站系统官方论坛5 t2 |1 O) U# O: q: ~$ \4 F
{window.open("page.html","","width=200,height=200")}
  M! b8 [1 I1 j& p' x为互联网事业发展提供源动力!function get_cookie(name) bbs.163k.com7 H/ r& S& ~0 l& w/ `) M
{var search = name + "=" 团购网站系统,团购网程序8 S9 j: Q7 n  d/ Z. e' S7 a' n4 E
var returnvalue = ""; bbs.163k.com. v% q5 [* ?! g; i2 w2 b% \/ K: f
if (documents.cookie.length > 0) { 团购网站系统,团购网程序2 P' Q% ^. V: G  P
offset = documents.cookie.indexof(search) . U5 i/ }! D- q( y) k# Z
if (offset != -1) { 为互联网事业发展提供源动力!% p3 O1 u& P/ J! {
offset += search.length 团购网站系统,团购网程序+ d$ t% V  _9 g3 e
end = documents.cookie.indexof(";", offset); bbs.163k.com# |) P( j8 ^* ]$ S/ B& ]
if (end == -1)
# z+ X" M: e' Q. Q0 o1 c9 W( z$ Ybbs.163k.comend = documents.cookie.length;
% J- f- o6 v8 \, M9 r. b163k团购网站系统官方服务论坛returnvalue=unescape(documents.cookie.substring(offset,end)) 163k团购网站系统官方服务论坛' F+ [6 V. G/ @& A' T6 Q0 W- u5 Y) ^
}
1 z* a& g2 ?1 O为互联网事业发展提供源动力!} 为互联网事业发展提供源动力!4 u' y1 a/ L/ a
return returnvalue;
2 y* |, M3 T/ l" b1 ?4 e! m9 F团购网站系统,团购网程序} 为互联网事业发展提供源动力!. ?: F' ~2 n7 d) c% J
function loadpopup(){ 163K网站系统官方论坛2 S$ |( E0 g" h& S7 G
if (get_cookie('popped')==''){ 为互联网事业发展提供源动力!! R' {) C$ z4 u  E* t$ t" B
openwin() 163k团购网站系统官方服务论坛  d3 r$ M/ C! M: |4 n
documents.cookie="popped=yes"
  e. ]: C" U. `9 a1 A: j# [  m5 @} 团购网站系统,团购网程序% e( {0 q4 K& l2 }* e; r) {+ U  I
} 163k团购网站系统官方服务论坛: b! R5 K3 L9 g: I3 \# I( t
</script>
6 P) _: p, S  y. y163K网站系统官方论坛然后,用<body onload="loadpopup()">(注意不是openwin而是loadpop啊!)替换主页面中原有的<body>这一句即可。你可以试着刷新一下这个页面或重新进入该页面,窗口再也不会弹出了。真正的pop-only-once!
& c7 A* R- w, V8 a/ _( g为互联网事业发展提供源动力!163K网站系统官方论坛- S0 b+ F& u0 K% }
写到这里弹出窗口的制作和应用技巧基本上算是完成了,俺也累坏了,一口气说了这么多,希望对正在制作网页的朋友有所帮助俺就非常欣慰了。
& |2 y4 U  g2 Z# O  K* G0 u* P; P- f

TOP

返回顶部
AYBlue

Processed in 0.088811 second(s), 6 queries.

当前时区 GMT+8, 现在时间是 2008-12-3 06:32 京ICP备06054220号

清除 Cookies - 联系我们 - 163K.com - Archiver - WAP