[建站经验与技巧] 常见弹出代码集合

jiangwei

网络发烧友

Rank: 2

发短消息
加为好友
当前离线

1^# 大中小发表于 2007-2-8 22:00 只看该作者

常见弹出代码集合

经常上网的朋友可能到过这样一些网站，一进入首页立刻会弹出一个窗口，或者按一个链接或按钮弹出，通常在这个窗口里会显示一些注意事项、版权信息、警告、欢迎光顾之类的话或者作者想要特别提示的信息。其实制作这样的页面非常容易，只要往该页面的html里加入几段javascript代码即可实现。下面我就带你剖析它的奥秘。

【最基本的弹出窗口代码】团购网站系统,团购网程序/ c4 }5 N, s6 ]  U2 p+ z
其实代码非常简单：
<script language="javascript">
 163K网站系统官方论坛+ p5 b$ Y  x& j! ?
</script>
因为这是一段javascript代码，所以它们应该放在<script language ="javascript">标签和</script>之间。是对一些版本低的浏览器起作用，在这些老浏览器中如果不支持javascript，不会将标签中的代码作为文本显示出来。
window.open ('page.html')用于控制弹出新的窗口page.html，如果page.html不与主窗口在同一路径下，前面应写明路径，绝对路径(http://)和相对路径(../)均可。团购网站系统,团购网程序" x2 ~: J1 q! K
用单引号和双引号都可以，只是不要混用。 163k团购网站系统官方服务论坛  p* {" T, O9 u+ N( N' _3 U0 y$ m
这一段代码可以加入html的任意位置，加入到<head>和</head>之间也可以，位置越靠前执行越早，尤其是页面代码较长时，又想使页面早点弹出就尽量往前放。团购网站系统,团购网程序! V1 `, o. D! E. O) }
为互联网事业发展提供源动力！6 l5 g0 f, {7 w
【经过设置后的弹出窗口】
下面再说一说弹出窗口外观的设置。只要再往上面的代码中加一点东西就可以了。团购网站系统,团购网程序+ k, |) A! F" J; w5 R6 C
我们来定制这个弹出窗口的外观、尺寸大小、弹出位置以适应该页面的具体情况。 ( [1 ]- \& q; p) C9 ]( s( l$ z
<script language="javascript:> 163K网站系统官方论坛6 j. W8 a# p% W5 J

</script> 为互联网事业发展提供源动力！: U4 I! K" |. n  k
参数解释：
<script language="javascript"> js脚本开始； 163K网站系统官方论坛2 C/ T: N( z6 s4 [7 o
window.open 弹出新窗口的命令； 163K网站系统官方论坛; R) Z2 @4 M1 r  s6 K6 f6 Y0 F" Q
page.html 弹出新窗口的文件名；
newwindow 弹出窗口的名字（不是文件名），可用空 ″代替；
height=100 窗口高度；
top=0 窗口距离屏幕上方的像素值；
left=0 窗口距离屏幕左侧的像素值；团购网站系统,团购网程序. p% k6 {) |( ]( G( i
toolbar=no 是否显示工具栏，yes为显示；为互联网事业发展提供源动力！# G! \' S' s7 h
menubar,scrollbars 表示菜单栏和滚动栏； 3 q, d  [" x) z; H& Y: b1 B
resizable=no 是否允许改变窗口大小，yes为允许； 163K网站系统官方论坛, X, \1 A# n1 s7 L+ r3 @# Y
location=no 是否显示地址栏，yes为允许； 163K网站系统官方论坛9 C; K1 f7 N: ?* S1 z& D, U$ n4 Z: Q& A
status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；
</script> js脚本结束。为互联网事业发展提供源动力！+ I8 g9 `$ x8 {. r  w# V

【用函数控制弹出窗口】为互联网事业发展提供源动力！% B+ F' n7 [& g: q9 |' [
下面是一个完整的代码。为互联网事业发展提供源动力！' w* w( p7 G) s; o& M7 j
<html>
<head> bbs.163k.com9 \' I4 f; ^0 i4 }5 \* g
<script language="javascript">

</script>
</head>
<body onload="openwin()"> bbs.163k.com6 W& s, ?' Z# ?0 _
...任意的页面内容... bbs.163k.com$ T* f$ V8 O: g  O2 p
</body> 163K网站系统官方论坛6 d8 i" K! x6 N) u: R* v, ^5 B
</html>
这里定义了一个函数openwin(),函数内容就是打开一个窗口。在调用它之前没有任何用途。怎么调用呢？
方法一：<body onload="openwen()"> 浏览器读页面时弹出窗口； & B+ f0 [8 p4 ~4 E0 ]( W
方法二：<body onunload="openwen()"> 浏览器离开页面时弹出窗口；
方法三：用一个连接调用：<a href="#" onclick="openwin()">打开一个窗口</a>
注意：使用的"#"是虚连接。为互联网事业发展提供源动力！8 \* S* u4 Z& y' ~
方法四：用一个按钮调用：<input type="button" onclick="openwin()" value="打开窗口"> 163K网站系统官方论坛2 V4 m' \8 a) k/ m5 Y' i5 r* |: ^

【主窗口打开文件1.htm，同时弹出小窗口page.html】 5 E2 h2 y- o' F
将如下代码加入主窗口<head>区：
<script language="javascript"> 163K网站系统官方论坛3 H4 Z' }5 A! n5 e0 T
 bbs.163k.com$ w* q0 h$ ~8 o, i. [& M+ N
</script>
加入<body>区：<a href="1.htm" onclick="openwin()">open</a>即可。团购网站系统,团购网程序0 V; d' p! ?$ @% f. O" i

【弹出的窗口之定时关闭控制】
下面我们再对弹出窗口进行一些控制，效果就更好了。如果我们再将一小段代码加入弹出的页面（注意是加入到page.html的html中，可不是主页面中，否则…），让它在10秒钟后自动关闭是不是更酷了？为互联网事业发展提供源动力！, I& d3 Z* ]* T# y
首先，将如下代码加入page.html文件的<head>区： bbs.163k.com6 S( Q( W) B# l/ ]
<script language="javascript"> 团购网站系统,团购网程序+ p' V- t. o) x2 p
function closeit() {
settimeout("self.close()",10000) //毫秒
}
</script> 团购网站系统,团购网程序' R: ]3 o5 c. Q/ k
然后，再用<body onload="closeit()">这一句话代替page.html中原有的<body>这一句就可以了。（这一句话千万不要忘记写啊！这一句的作用是调用关闭窗口的代码，10秒钟后就自行关闭该窗口。）
bbs.163k.com6 i- I8 I. o' r. m2 a  w% B& g7 `
【在弹出窗口中加上一个关闭按钮】 163K网站系统官方论坛; q- `1 _/ S, f9 }$ S
<form>
<input type='button' value='关闭' onclick='window.close()'>
</form>
呵呵，现在更加完美了！ bbs.163k.com: }, v  x& x6 E. N& S; J
163k团购网站系统官方服务论坛% g, L+ v$ r: ?% R- @6 Q4 v+ e
【内包含的弹出窗口——一个页面两个窗口】
上面的例子都包含两个窗口，一个是主窗口，另一个是弹出的小窗口。 bbs.163k.com) x- {, Q" {0 Q; J& ?$ _
通过下面的例子，你可以在一个页面内完成上面的效果。 ; U& i9 V! B$ l8 X, k* x
<html> bbs.163k.com- s; E/ D# j+ B0 l' B: ]# h! d
<head> 团购网站系统,团购网程序& W+ Y6 U# r4 B5 D
<script language="javascript"> : ^4 h  D2 s. Y/ p* [
function openwin()
{
openwindow=window.open("","newwin","height=250,width=250,toolbar=no,scrollbars="+scroll+",menubar=no";);
//写成一行
openwindow.document.write("<title>例子</title>" ;)
openwindow.document.write("<body bgcolor=#ffffff>" ;)团购网站系统,团购网程序: G9 y: o+ V) J" ?
openwindow.document.write("<h1>hello!</h1>" ;)
openwindow.document.write("new window opened!" ;)163K网站系统官方论坛4 @9 e0 u1 W* h& m6 @3 Q
openwindow.document.write("</body >" ;)163k团购网站系统官方服务论坛( _8 r) n2 ?0 h
openwindow.document.write("</html>" ;) 163k团购网站系统官方服务论坛8 z7 ~/ U9 L  F/ q. U/ y
openwindow.document.close() bbs.163k.com6 ?4 P& z4 @2 j# ]8 \4 N
}
</script> 为互联网事业发展提供源动力！; n+ y0 ?# F" @- T  Q
</head> bbs.163k.com- ~6 C9 Y7 n( X; R3 t
<body> 团购网站系统,团购网程序% G( e( V# g+ e5 S
<a href="#" onclick="openwin()">打开一个窗口</a> 7 X9 D% p5 L  X1 ?, F* n
<input type="button" onclick="openwin()" value="打开窗口">
</body> 163k团购网站系统官方服务论坛( x1 _; D2 W4 l+ N3 y
</html> 6 I+ G9 M$ V! H8 S8 W: B
看看openwindow.document.write()里面的代码不就是标准的html吗？只要按照格式写更多的行即可。千万注意多一个标签或少一个标签都会出现错误。记住用openwindow.document.close()结束啊。团购网站系统,团购网程序+ r3 ~6 a; U/ a) b4 ?

【终极应用——弹出窗口的cookie控制】团购网站系统,团购网程序7 b  W4 R" Y+ o# P+ c
回想一下，上面的弹出窗口虽然酷，但是有一点小毛病（你沉浸在喜悦之中，一定没有发现吧？）比如你将上面的脚本放在一个需要频繁经过的页面里（例如首页），那么每次刷新这个页面，窗口都会弹出一次，是不是非常烦人？有解决的办法吗？yes!follow me。我们使用cookie来控制一下就可以了。 bbs.163k.com% W$ k, E7 x: ^' m" g4 k
首先，将如下代码加入主页面html的<head>区：
<script> % P4 |% P- i$ T
function openwin(){ 团购网站系统,团购网程序' c( {( I6 X2 _! g) ~
window.open("page.html","","width=200,height=200" ;)
} 为互联网事业发展提供源动力！* v" X3 Q7 b  w9 k& V1 U4 y
function get_cookie(name){
var search = name+ "=" bbs.163k.com5 R* i' k! Y' B+ U
var returnvalue ="";
if (documents.cookie.length >0){ 5 x7 H8 F$ v0 c; p" u0 `* K& `
offset = documents.cookie.indexof(search)
if (offset!=-1){ 163K网站系统官方论坛3 A2 `9 U' T0 y/ D& D: Y  c
offset += search.length
end = documents.cookie.indexof (";",offset);
if (end ==-1)
end = documents.cookie.length; 为互联网事业发展提供源动力！% F4 X$ R& G" |% U; c! E7 y3 v: e( p7 M
returnvalue =unescape(documents.cookie.substring(offset,end))
}
}
return returnvalue; bbs.163k.com. y& ]8 g0 K1 ~$ X" t
}
function loadpopup(){ 163K网站系统官方论坛$ s# Z9 m& N+ k
if (get_cookie('popped')==";){ 为互联网事业发展提供源动力！# L) D; B" V; S! ^4 {+ j
openwin()
documents.cookie="popped=yes" " L' V1 \6 ~( B( X, h
} bbs.163k.com, S6 [% x4 K7 p& N" Y
} 163K网站系统官方论坛9 ?$ j' `, R3 c7 j* A. W' `* a+ r
</script>
然后，用<body onload="loadpopup()">（注意不是openwin 而是loadpop啊）替换主页面中原有的<body>这一句即可。你可以试着刷新一下这个页面或重新进入该页面，窗口再也不会弹出了。真正的pop-only-once! bbs.163k.com1 `' W) A, T/ {- F( \
写到这里，弹出窗口的制作和应用技巧基本上算是讲完了，希望对正在制作网页的朋友有所帮助我就非常欣慰了。
需要注意的是，js脚本中的大小写最好前后保持一致。 163k团购网站系统官方服务论坛. F4 H  @8 H7 z4 @% R6 O

没有菜单、工具栏、地址栏的弹出窗口：
为互联网事业发展提供源动力！& ~& u9 b+ J# R  h9 g
<script language="javascript"> & j5 r  y) D5 b: o, [- k, o

</script>  163K网站系统官方论坛! f+ i* }) p8 O( }7 V

使窗口只第一次访问时弹出
有时为了某种需要，要求进入一个页面时弹出一个窗口．但每次进入时都会弹出，就使人感受到烦．怎样实只弹出一次呢？下面的程序将实现浏览才第一次访问这页时弹出窗口，以后再进入则不会弹出．163k团购网站系统官方服务论坛7 x. W; q5 {! e
　　在<head>…..</head>之间加入下列代码：163K网站系统官方论坛! j/ Q9 C  s/ c/ _& N7 s
<script languang="javascript">
function openpopup(){
window.open("hello.htm","","width=300,height=300") //自己修改弹出窗口
}
function get_cookie(name) {+ K. a- B2 Y# A) @7 N- P
var search = name + "="
var returnvalue = "";
if (documents.cookie.length > 0) {为互联网事业发展提供源动力！3 a% Z; x8 F8 w3 z1 V( }( _
   offset = documents.cookie.indexof(search)
   if (offset != -1) {
      // if cookie exists+ C2 y/ l0 S  ]+ [9 g  B3 Y
      offset += search.length团购网站系统,团购网程序8 M' R' Y* u- p) A& y
      // set index of beginning of value团购网站系统,团购网程序2 Q$ b9 z! X8 Q/ p' g
      end = documents.cookie.indexof(";", offset);
      // set index of end of cookie value163k团购网站系统官方服务论坛  z- f( k5 ^8 z8 R4 w
      if (end == -1)bbs.163k.com# g! z) F% A# L
         end = documents.cookie.length;为互联网事业发展提供源动力！2 _, o8 I9 ?% B0 ^3 {/ |
      returnvalue=unescape(documents.cookie.substring(offset, end))
   }! b% n" r" Q# q4 \0 @
} 团购网站系统,团购网程序% X6 q* g" Z+ |5 x! ]% i: U8 Q' Z/ F
! Y3 \2 u$ D* B9 d
return returnvalue;
}
function loadpopup(){
  if (get_cookie("popped")==""){团购网站系统,团购网程序1 k( Q" Y* S6 `4 k) K
   openpopup()
   documents.cookie="popped=yes"
}
}
</script>　 bbs.163k.com( L$ u2 |+ u9 c6 y3 _2 ]- ^

将如下代码键入body区：
<body onload="loadpopup()">
//pop when enter page

163K网站系统官方论坛. L9 q' j! B' c: P
6 j  e1 Q8 V7 ?0 @4 e1 ~; J
163k团购网站系统官方服务论坛$ T, A2 @  c! |% ^; ~1 g9 X

在设计网站的时候，在网站有重大的变动，或者需要作什么声明的时候，我们就要用到弹出
窗口，这时只要我们一进入这个页面，就会弹出一个窗口，其实要制作这样的弹出窗口真的非常团购网站系统,团购网程序& B7 w4 ]2 W9 B1 V" L
的容易，只要在该页面的html代码里加入一段javascript代码即可实现了。我们就来看看这最简
单的弹出窗口：　　把下面的这一段代码可以加入html文件的<head>和</head>之间或者<body>间</body>就
行的了，越在前面越早执行的哟！
<script language="javascript"> //*javascript脚本的开始标签，千万要记得啊为互联网事业发展提供源动力！' j& E  a) y0 g( I" h3 I* J& w" b

163K网站系统官方论坛' x# k/ C3 m" U3 I7 c
</script>bbs.163k.com+ `! X9 `' y( R- Z% ?) {+ F

　　这里只需要注意这样一点就行的了：window.open ('pop1.html') 用于控制弹出窗口pop1.html，如

果pop1.html不与主窗口文件在同一路径下，你应该在前面指明路径，绝对路径(http://)和相对路
团购网站系统,团购网程序/ y6 Y3 B' J" J5 t4 ^3 M
径(../)都可以的。里面用单引号和双引号都可以，只是你千万别混用，一会用单引号，而一会用双引号。

　　上面我们实现的是最基本的弹出窗口，我们的起步，我们现在再来看一个稍微复杂点的弹出窗口，你只
要对上面的代码作小小的改动就行的了！这样我们就能定制弹出窗口的外观，尺寸大小，弹出的位置以适应163K网站系统官方论坛& P8 k. a3 ]8 g1 O
该页面的具体情况和文字的多少。
<script language="javascript">163k团购网站系统官方服务论坛. F, B6 U' d2 {1 k' b
bbs.163k.com+ R/ h; U$ H' C8 w8 c
</script>
团购网站系统,团购网程序, j" a. ~& Z+ p1 u  c
　　但是我们看到，这样的弹出窗口实在太简单的了，你基本上不能对他进行什么样的控制和设置，我们需要的是能满足我们的需要的弹出窗口（现代人是要求越来越高的了），那我们就用下面这个脚本来实现，你不但可以定制窗口大小，你还可以根据自己的需要改成你自己的说明的，这样的欢迎窗口一定让你的主页更酷。
　　将如下代码加入html代码的<head>和</head>之间：

<script language="javascript">163k团购网站系统官方服务论坛* j7 i8 ?2 v$ `. O* C

</script>
团购网站系统,团购网程序  G, w: E! \1 u. i& Q
　　有时为了需要我们可以同时弹出两个窗口，这实现难吗？其实也不难，如果你理解了上面的，那简直就易如反掌了，来看看吧，你只要对上面的代码稍微改动一下就可以的了：6 M. A' `6 a8 g8 }
163k团购网站系统官方服务论坛/ x1 r  H! l6 N. u5 V- E, q
<script language="javascript">

</script>163K网站系统官方论坛! O! ~4 v' h7 Q9 v5 ?4 C! U

　　在这里，我们为了避免弹出的2个窗口覆盖，用top和left控制一下弹出的位置不要相互覆盖就可以的了。

　　有了上面这些，我想你要做出很酷很好的弹出窗口已经很容易的了，但是我们发现在你访问一个站点的时候，如果经常出现弹出窗口（每刷新一次就出现），我们就会觉得很烦的，这里我们看看对弹出窗口的一些优化处理：

团购网站系统,团购网程序' ?; ^7 ^$ W. c
　　第一招，我们给弹出窗口加个“关闭窗口“按纽163k团购网站系统官方服务论坛8 G% N3 V2 Y, J  Y2 T
　　只要加上这段代码就行的了：
8 H  Y9 J' i( r
<form>163K网站系统官方论坛/ B. y& u3 ]3 C( x' ]( K' F; @
<input type='button' value='关闭' onclick='window.close()'>团购网站系统,团购网程序3 Z1 z' P/ F4 U* C4 j8 c& K/ c5 j. |
</form>
163K网站系统官方论坛- a4 z+ g4 b/ t) G# \% g( W, Q
　　第二招：让弹出窗口自己定时关闭
　　首先，将如下代码加入pop1.html文件的<head>和</head>之间：
为互联网事业发展提供源动力！  U3 s/ g: E; E, Z, l# F# e3 A8 V1 S
<script language="javascript">

</script>
为互联网事业发展提供源动力！/ A5 U+ W+ g2 S
　然后，用<body onload="loadpopup()">替换页面中原来的<body>这一句就行的了。这样你的弹出窗口就只弹出一次了，既使大家了解了你的信息，也不会觉得烦的。最后祝大家做出你满意的效果来，到时别忘记了叫我来看看啊！为互联网事业发展提供源动力！6 c) Q3 b4 q) @$ _) q

TOP

‹‹ 上一主题 | 下一主题 ››

Processed in 0.099862 second(s), 6 queries.

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

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