Lightbox类

来源：互联网发布：阿里云 25端口解封编辑：程序博客网时间：2024/05/17 04:22

<html>

<head>

/* lightbox CSS */

#lightbox {/*该层为高亮显示层*/

display: none;

width:352px;

height:150px;

position:absolute;

font-size:14px;

font-family:"Tahoma",Verdana,Arial,宋体;

z-index:9990;

top: 190px;

left: 33%;

}

.main{ z-index:9999;position:absolute; top:0px; left:0px;}

#lb_inner{ width:350px; height:148px; background:#fff url(images/loading.gif) 15px 30px no-repeat; border:1px solid #ccc;

border-right:1px solid #666; border-bottom:1px solid #666;}

#lb_con{ padding:20px 20px; position:absolute; left:50px;}

.btn{ text-align:center;position:absolute;top:100px;width:100%;}

.shadow{ z-index:9998;position:absolute; top:4px; left:4px; width:352px; height:150px;

background:#666;opacity:0.2;filter:alpha(opacity=20);}

#overlay {/*该层为覆盖层*/

display: none;

position: absolute;

top: 0;

z-index: 9000;

background-color: #fff;

filter:alpha(opacity=40);

-moz-opacity: 0.4;

opacity: 0.4;

}

</style>

var Class = {

create: function() {

return function() {

this.initialize.apply(this, arguments);

}

Object.extend = function(destination, source) {

for (var property in source) {

destination[property] = source[property];

}

return destination;

}

//简化document.getElementById(element).style

function $C(element){

return document.getElementById(element).style;

}

var Lightbox = Class.create();

Lightbox.prototype = {

initialize: function(options) {

//可以考虑在这里创建Lightbox的div结构，未知方法

this.SetBox(options);

//设置默认属性

SetOptions: function(options) {

this.options = {//默认值

overlay: true,//覆盖层

bgImage: 'images/ending.gif',//背景图

content: '请点击"取消操作"返回',//内容

btn_value: '取消操作',//按钮内容

btn_onclick: this.Close//按钮操作

}

Object.extend(this.options, options || {});

//设置Lightbox

SetBox: function(options) {

this.SetOptions(options);

$C("lb_inner").backgroundImage = 'url('+this.options.bgImage+')'

document.getElementById("lb_con").innerHTML = this.options.content;

var btn = document.getElementById("lb_btn");

btn.value = " "+this.options.btn_value+" ";

btn.onclick = this.options.btn_onclick;

//显示Lightbox

Show: function(options) {

this.SetBox(options);

if(this.options.overlay){ this.ShowOverlay(); } else { this.CloseOverlay(); };

$C("lightbox").display="block";

SetSelects('hidden');

//关闭（隐藏）Lightbox

Close: function() {

$C("overlay").display="none";

$C("lightbox").display="none";

SetSelects('visible');

//显示设置覆盖层

ShowOverlay: function() {

with ($C("overlay")) {

display="block";

width = 776+'px';//这里应根据实际情况确定

height = document.body.scrollHeight+'px';

}

//关闭覆盖层

CloseOverlay: function() {

$C("overlay").display="none";

}

};

//设置所有select的css属性，由于select不能覆盖,所以在显示Lightbox时要隐藏掉

function SetSelects(css) {

selects = document.getElementsByTagName("select");

var len = selects.length;

for (i = 0; i != len; i++)

selects[i].style.visibility = css;

}

</script>

</head>

<body>

</div>

</div>

//先创建和初始化一个Lightbox实例

var box = new Lightbox();

//然后就可以对这个Lightbox进行操作了

box.Show({

bgImage: 'images/loading.gif',

content: '内容显示',

btn_value: '按钮'

});

</script>

</body>

</html>