CoolBox V1.0:使浏览器屏幕表现为放射状的灰色,并弹出高亮div (仿LightBox效果)

 网站地址:http://www.weike5.cn/?p=117

很多时候,我们希望在触发某个事件后(比如单击),整个屏幕呈现灰色,并弹出高亮Div 。
同时,我们要还可以要求:

  • 高亮Div以外的元素都不可用。
  • 高亮Div适应所有ie6 ie7 firefox兼容。
  • 多分辨率下应该正确居中

CoolBox V1.0 就是为了提供这个解决方法而设计的 。

说明:程序是肯定开源的,所以如果您有好的建议,您可以通过博客、QQ、E-MAIL与我联系,联系地址在CoolBox压缩包中。欢迎大家批评。

注意:它建立于开源框架 prototype.js - 1.5.1.2 之上 ,所以要正常使用CoolBox,请保证prototype也被引用。

下载/Files/lyamlf123/CoolBoxV1.0.rar  

使用方法

1、下载 CoolBoxV.10 (Rar) 和 prototype.js ,js文件推荐放到一个文件夹(我放在根目录下的js文件夹中),注意修改coolbox.js中coolbox_close.gif的存放地址

2、在页面<head></head>区域引入两个js文件:

<script type="text/javascript" src="../JS/prototype-1.5.1.2.js"></script>
<script type="text/javascript" src="../JS/CoolBox.js"></script>

3、在页面<body></body>区域外即页面底部按如下格式书写代码:

// 参数:高亮div宽度,高度,边框颜色,背景颜色
var coolbox = new CoolBox("500","300","#989EA0","#F7FAFA");

// 参数:titleObj_value为高亮div的标题栏内容,如图2中的‘临床职业医生实践技能’
var titleObj_value="我是标题栏的文字";
coolbox.show(titleObj_value);

// 向高亮div中添加1个新的由javasciprt生成的div ,
var div_courseps= document.createElement("div");
div_courseps.setAttribute("id","div_courseimageurl");

div_courseps.innerHTML = "我是第一个div哦!"
coolbox.append(div_courseps);//如图2div_courseps

// 向高亮div中添加1个新的图片
var div_courseimageurl = document.createElement("div");
div_courseimageurl.setAttribute("id","div_courseimageurl");
div_courseimageurl.innerHTML = "<img src='' />" ;
coolbox.append(div_courseimageurl);//如图2div_courseimageurl

// 如何让高亮Div自适应高度?
// coolbox.clear();
// 该方法在此版本中,由于项目紧张,无法查找出不工作的原因
// 大家有好的建议,请联系我,谢谢。

 图片演示


图片1


图片2

posted @ 2008-12-24 03:03  lyamlf123  阅读(2853)  评论(27编辑  收藏