• English Edition | 站内检索:
  • 网站首页 | 网页技术 | 教程相关 | 软件应用 | 常见问题 | 新手上路 | 网页论坛 | 研究报告
    上网指南 | 网络病毒 | 邮件指南 | 解决方案 | 企业服务 | 服务中心 | 自由泳网 | 想象讲场

  •  网页树树 > 自由勇专栏

    自由勇-王志勇(1980-09-26)
    Webshu编辑。
    1994年开始练习五笔字形;2000年底开始学习和大量实践网页制作;从事网站程序设计。

    自由勇的Blog | 每天启航
    Blog存档

    Gratitude | Matnue | Aucist | Aroat | Aufirm | IXNes | Anydiary | Cersta | Coumit | Tovate | Aroat | Aucist | Matnue | Sinvide | Serble | Auciou | Peaceful Seabed | Sail every day | Sail every day

    访问统计:
    5457

        如何制作漂亮的弹出窗口(专题) 作者:自由勇

    2003年09月27日 12:58 点击:超过8000次

      在什么场合下需要弹出窗口,是要非常慎重的!不知道这会不会影响访问量,但至少我不会这样做,现在的Google工具条已经有弹出窗口拦截功能,所以弹出窗口在一定程度上已经失去了意义。如果想让弹出窗口更人性化,可以用Cookies来记录,让这个窗口在一周内只弹出一次。(具体方法,在这篇有介绍。)

      弹出窗口的参数,在JavaScript教程里有详细的介绍,你有必要去买这本书,或者从Google上找个教程,下面整理一下各参数的作用,以及具体操作方法。注意,有关涉及到编程、代码的步骤,应该用记事本来做,不要在Dreamweaver下操作,否则,会有意想不到的麻烦。

      一、如何在打开网页时弹出一个页面?
      很简单。只要在网页代码最后加入这句:
      <script>window.open("URL","a","width=420,height=330")</script>

      例如这页弹的窗口就是这句代码,这里的URL表示页面的地址,可以是相对路径,也可以是http的绝对路径,例如这页的弹出窗口,这里使用的是相对路径,这里的../表示向上一级,代码如:<script>window.open("http://www.webshu.com","a","width=420,height=330")</script>。
      也可以用绝对路径,如:<script>window.open("http://www.webshu.com","a","width=420,height=330")</script>。

      参数说明,第二个属性"a",表示窗口的名字,它的意义在于,当你刷新原始的这页全窗口的时候,弹出窗口就会刷新一次;而如果把名字省略,改为"",那么当刷新这页的时候,就会新增加一个弹出窗口。
      width表示弹出窗口的宽度,height表示高度。

      二、如何点击超链接弹出一个窗口?
      请先点击这里的演示效果,它的代码如:
      <a style="cursor:hand" onclick='window.open("URL","","width=420,height=330")'>超链接描述文字</a>

      三、如何批量实现第二步的效果?
      <script>function y(e){window.open(e,"","width=400,height=300")}</script><style>.h{cursor:hand}</style>
      <a onclick=y("http://www.webshu.com") class=h>网页树树</a>
      <a onclick=y("http://www.auiou.com") class=h>自由勇</a>
      <a onclick=y("http://www.auciou.com") class=h>Auciou</a>

      四、如何实现带有地址栏和工具栏的弹出窗口?
      这样做就没什么意义了,还不如直接就做个超链接。详细参数如:toolbar表示工具栏,menubar表示菜单栏,scrollbars表示滚动栏,resizabl表示是否允许改变窗口大小,location表示是否显示地址栏,status表示是否显示状态栏内。默认情况下,都是否;值选为1或yes,表示是。

      这里只举滚动栏的例子,因为只有它对我们来说是有真正意义的,演示请点击这里。
      它的代码如:
      <a style="cursor:hand" onclick='window.open("URL","a","width=430,height=330,scrollbars=1")'>超链接描述文字</a>

      五、如何制作精美的弹出窗口呢?
      这就需要有见多识广的实际经验,逐渐培养良好的审美观念,多浏览国内大型网站、外国网站,这都是我们学习的好榜样,有创意的东西才是最有生命力的,才会让人眼前一亮。精美的弹出窗口不仅体现在美术设计方面,还体现在内容的清新。
      我们可以看看一些商业网站的弹出窗口,内容的中心非常明确。要想让弹出窗口能取得一定的效果,图片是必不可少的,也可以写醒目的大标语,再加上简要的介绍。“详情请进”这个链接也是很有必要的,要巧妙地设置超链接。

      至此,本专题就讲完了。内容很简短,但却是非常实用的,在第一、第二、第四的例子中,省略了非常多的网站一直用的function建立自定义函数,因为这里是不必要的。

    网页树树版权声明:
    此文为Webshu.com独家撰稿,著作权属作者所有,禁止转载。
    此文网址 http://webshu.cn/column/102/17.html

  • 关于我们 :: 使用帮助 :: 版权信息 :: 网站地图 :: 信息反馈
    Copyright © 2003-2025 webshu.com 版权所有