华易动力天津网站制作公司 免费咨询热线:400-0022-823 电话:022-28261501 28335110
地址:天津市河西区围堤道146号华盛广场B座22楼
点击这里给我发消息  点击这里给我发消息  点击这里给我发消息
  首页 关于我们 建网站:从这里开始 域名空间服务 案例展示 新闻中心 网站制作知识 网站设计技巧 人才招聘 联系我们  
  网站设计技巧
设计技巧
天津网站制作方案 更多..
如何获得了大量的好的外链资源
常见的长尾关键词组合方法
如何利用百度平台获取流量
营销优化型网站的简介
新顶级域名的形式
网站建设分为如下八步
网站专题设计
关于门户网站设计方案
华易动力售后服务规范
服务器机房介绍
优秀客户展示(排名无先后) 更多..
环化(天津)燃气设备安装有限公司
天津市国信投资担保有限公司
天津城市职业学院
天津大学EMBA
南开大学CID
北京同仁堂天津药店有限公司
金权道(天津)餐饮管理有限公司
天津市友好合作城市企业促进会
天津天大求实电力新技术股份有限公司
天津红旗农贸投资控股有限公司
天津二人锅餐饮管理有限公司
天津市滨湖剧院
渤海产业投资基金管理有限公司
天津天富软管工业有限公司
新闻中心-行业资讯 更多..
· 企业为什么要做APP   2016-11-24
· 如何搭配网站   2016-11-16
· css表单布局的五个小技巧   2016-11-16
· 服务器维护的重点   2016-11-14
· 如何建设你想要的网站类型   2016-11-14
· 阿里设计师用这2方法提升设计创新力   2016-11-3
· 我们看过的各种设计理论法则   2016-11-3
· Windows 8设计时的安全性   2013-12-27
· 未来网站技术的发展   2013-10-12
· 企业网站建设规划   2013-7-30
全部信息 当前位置:首页网站设计技巧 → 详细内容
弹出窗口制作的九个技巧
更新时间:2013/1/23 点击:1499次
经常上网的朋友可能会到过这样一些网站,一进入首页立刻会弹出一个窗口,或者按一个连接或按钮弹出,通常在这个窗口里会显示一些注意事项、版权信息、警告、欢迎光顾之类的话或者作者想要特别提示的信息。其实制作这样的页面效果非常的容易,只要往该页面的HTML里加入几段Javascript代码即可实现。下面俺就带您剖析它的奥秘。

1、最基本的弹出窗口代码

其实代码非常简单:

〈SCRIPT LANGUAGE="javascript"〉
  〈!--
  window.open ("page.html")
  --〉
  〈/SCRIPT〉

因为这是一段Javascript代码,所以它们应该放在〈SCRIPT LANGUAGE="javascript"〉之间。 〈!-- 和 --〉是对一些版本低的浏览器起作用,在这些老浏览器中不会将标签中的代码作为文本显示出来。要养成这个好习惯啊。

window.open ("page.html") 用于控制弹出新的窗口page.html,如果page.html不与主窗口在同一路径下,前面应写明路径,绝对路径(http://)和相对路径(../)均可。

用单引号和双引号都可以,只是不要混用。

这一段代码可以加入HTML的任意位置,〈head〉和〈/head〉之间可以,〈body〉间〈/body〉也可以,越前越早执行,尤其是页面代码长,又想使页面早点弹出就尽量往前放。 也可以,越前越早执行,尤其是页面代码长,又想使页面早点弹出就尽量往前放。

2、经过设置后的弹出窗口

下面再说一说弹出窗口的设置。只要再往上面的代码中加一点东西就可以了。我们来定制这个弹出的窗口的外观,尺寸大小,弹出的位置以适应该页面的具体情况。

〈SCRIPT LANGUAGE="javascript"〉
  〈!--
  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")
  //写成一行
  --〉
  〈/SCRIPT〉
  参数解释:
  〈SCRIPT LANGUAGE="javascript"〉js脚本开始;
  window.open 弹出新窗口的命令;
  "page.html" 弹出窗口的文件名;
  "newwindow" 弹出窗口的名字(不是文件名),非必须,可用空"代替;
  height=100 窗口高度;
  width=400 窗口宽度;
  top=0 窗口距离屏幕上方的象素值;
  left=0 窗口距离屏幕左侧的象素值;
  toolbar=no 是否显示工具栏,yes为显示;
  menubar,scrollbars 表示菜单栏和滚动栏。
  resizable=no 是否允许改变窗口大小,yes为允许;
  location=no 是否显示地址栏,yes为允许;
  status=no 是否显示状态栏内的信息(通常是文件已经打开),yes为允许;
  〈/SCRIPT〉js脚本结束

3、用函数控制弹出窗口

下面是一个完整的代码:

〈html〉
  〈head〉
  〈script LANGUAGE="JavaScript"〉
  〈!--
  function openwin() {
  window.open ("page.html", "newwindow", "height=100, width=400, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")
  //写成一行
  }
  //--〉
  〈/script〉
  〈/head〉
  〈body onload="openwin()"〉
  ...任意的页面内容...
  〈/body〉
  〈/html〉

这里定义了一个函数openwin(),函数内容就是打开一个窗口。在调用它之前没有任何用途。

怎么调用呢?

方法一:〈body onload="openwin()"〉 浏览器读页面时弹出窗口;
  方法二:〈body onunload="openwin()"〉 浏览器离开页面时弹出窗口;
  方法三:用一个连接调用:〈a href="#" onclick="openwin()"〉打开一个窗口〈/a〉
  注意:使用的"#"是虚连接。
  方法四:用一个按钮调用:〈input type="button" onclick="openwin()" value="打开窗口"〉

4、同时弹出2个窗口

对源代码稍微改动一下:

〈script LANGUAGE="JavaScript"〉
  〈!--
  function openwin() {
  window.open ("page.html", "newwindow", "height=100, width=100, top=0, left=0,toolbar=no, menubar=no, sc

 
  公司总机:022-28261501 28335110
客户服务邮箱:service@nfree.cn,手机直线:15822335163
CopyRight 2006~2024 All Rights Reserved 天津市华易动力信息科技有限公司
地址:天津市河西区围堤道146号华盛广场B座22楼 邮编:300202

津公网安备 12010302001042号


在线QQ(售前咨询)
点击这里给我发消息  点击这里给我发消息  点击这里给我发消息