首页 新闻 搜索 短信 分类 聊天 企业
上移动梦网
赢手机大奖

新浪首页 > 科技时代 > 网上学园 > 主页制作 > 正文
自己制作友好的页面“确认对话框”

http://www.sina.com.cn 2002/07/25 11:23 赛迪网--中国电脑教育报

  文/姚永奎

  上网时,常遇到这种情况:当点击某个页面上某个链接时,弹出一个显示警告、欢迎或注意事项、提示、版权等信息且带有“确定”和“退出”按钮的确认对话框(图1):若选“确定”则会继续加载到目标页面,若选择“退出”则不继续,从而给浏览者一个反悔的机会。


图1

  最常见的这种是通过HTML中的“<head></head>”或“<body></body>”之间的下面这段JavaScript代码来实现的(不过要注意,在链接标签内的“href="目标页面的URL"”后空一格还有个“onclick="rusure(); return false;" "width=340,height=163"”语句哟)。

  <script language="JavaScript">

  function rusure()

  {

  question = confirm("##") ///##为“相关信息的内容”

  if (question !="0")

  {

  window.open("目标页面的URL","测试公告窗口","width=340,height=163");///定制确认对话框尺寸及确定后的目标页面

  }

  }

  </script>

  如果你也正在热情地做“叶子”,是否感到这有点千篇一律?DIY一个吧!下面(图2)是我尝试用页面定制的一个。过程是:先将要用作按钮的文字或图片超链接到目标页面,其HTML源代码为:<a href="#" onClick=window.open("目标页面R的URL","list","scrollbars=no,resizable=no,left=100,top=80,width=300,height=80")>图片URL或文本</a>。其中“onClick=window.open”后的括号中的第三个双引号内是定义新窗口的高度和宽度,并且不显示工具栏、菜单栏及滚动条而只有一个标题栏。不过特别值得注意的是:“href=”后的双引号内一定是#;然后再用下面两种方法之一实现确认对话框DIY:

  1、用网页制作软件去做,制作过程如下:

  (1)运行你所熟悉的网页制作软件(如FrontPage、Dreamwaver等),新建一个空白页面,输入信息文字并设置为居中;

  (2)另起一行插入一个1行3列的表格,设置表格宽度、边线宽度及单元格间距等皆为“0”,并设置第1、3单元格宽度为适当像素(我用的是80)且设置中间一个单元格宽度为10像素(这一格中不输入任何文字,目的是让两个按钮有10像素的间隔);

  (3)在第1单元格输入“确定”二字,设置好屏幕提示信息并设置好超链接(注意目标框架设置为新窗口方式);在第3单元格输入“退出”二字,设置好屏幕提示信息并设置好超链接(因为是关闭本窗口,所以注意在超链接地址栏中输入“javascript:window.close()”)。

  2、HTML语言法,其设置如下:

  (1)、在目标页面的<body>和</body>之间写入如下语句:

  <p align="center">

  <font face="某种字体" color="宋体颜色" size="字号"><b>设定相关信息文字</b></font></p>


图2

  (2)在<body>和</body>之间写入如下语句:

  <center>

  <table border="0" cellpadding="3" cellspacing="0" style="border-collapse: collapse">

  <tr>

  <td width="80" align="center" bgcolor="#C0C0C0">

  <font face="宋体">

  <a style="FONT-SIZE: 10pt; COLOR: #000000" target="_blank" title="想进就“确定”:-)" href="01.htm">确定</a></font>

  </td>

  <td width="10" align="center"></td>

  <td width="80" align="center" bgcolor="#C0C0C0">

  <font face="宋体">

  <a style="FONT-SIZE: 10pt; COLOR: #000000" title="后悔了?“退出”好啦:-)" href="javascript:window.close()">退出</a></font></td>

  </tr>

  </table>

  </center>

  代码说明:其中“<table……></table>”标签定制了一个一行三列的表格,且用“<center></center>”将这个表格限制为居中;第一单元格标签“<td……></td>”定制了其宽度为80像素、居中、单元格背景色为灰等属性,且定制了确定按钮字的字体、新窗口打开目标页面及鼠标指向确定按钮时的提示信息等;第三单元格标签“<td……></td>”定制与第一格相同的单元格属性,且定制了退出按钮字的字体、鼠标指向退出按钮时的提示信息及点按退出按钮后利用“javascript:window.close()”命令关闭窗口。


  


发表评论】【初学者园地】【科技聊天】【关闭窗口

新 闻 查 询

 相关链接
【学园专题】主页制作步步高
让“小窝”更具魅力 网页制作有诀窍(2002/07/22 09:18)
批量消除网页连接上的“虚线框”(2002/07/19 13:04)
制作和管理个人站点的三点建议(2002/07/19 09:26)
网页制作有捷径:Xara WebStyle(2002/07/18 12:06)
走近3D梦幻网页(3)--事件与动作(2002/07/18 11:58)
走近3D梦幻网页(2)--打造3D虚拟世界(2002/07/01 10:04)
走近3D梦幻网页(1)--初次握手3D网页(2002/06/27 09:54)
有了HomePlus你也是主页制作专家(2002/06/25 10:26)


科技时代意见反馈留言板 电话:010-82612286 或 010-82628888-5488   欢迎批评指正

新浪简介 | 用户注册 | 广告服务 | 招聘信息 | 中文阅读 | Richwin | 联系方式 | 产品答疑

Copyright © 1996 - 2002 SINA.com, Stone Rich Sight. All Rights Reserved

版权所有 四通利方 新浪网